Ovalpixels Blog about Web-Building

The CSS box model

The CSS box model is a W3C standard that draws the basic principles on which a box is drawn in HTML/CSS. Since every HTML element is actually a box, this principle applies to every element. Basically it states that the screen estate a box takes up is defined by the following parameters, in this order from inside to outside:

1. width/height
2. padding
3. border
4. margin

Here the content area is defined by width/height. Read the rest of this entry »

I recently had a small design job to do on a site based on the Thematic WordPress theme framework. It was all creating graphics and adding them to the CSS file of the blog. While completing this task I stumbled upon several issues, so I woud like to share the solutions I used for them.

Read the rest of this entry »

Modern day e-commerce needs to be very hi-tech to get advantage over the competition. We have quite a lot of examples of e-shops implementing amazing technology to become more attractive to customers. One of these is the ability to customize a product and view a realistic visualization of how it would look like in real life. We have already done something similar for these guys – it includes some 3D rendering, jQuery and CSS. But this time we have to use other tools and materials. Read the rest of this entry »

…or adding a pinch of parametricity to your photoshop work

Intro

Imagine the following: you have worked on a Photoshop project, spending hours on end over it. You may not have slept this night, but you know that every drop of sweat was worth it – after all you have created wonders! The result is quite impressive, and of course when you show it to the customer he is totally into it, and says:

“This is great! I love it! But what if we make the image of the little girl a bit bigger?… Just a bit – it shouldn’t be an issue, right?”

OR

“That tree you have cut out from the background… Let’s get it back and see if it is better”

Well… Let me hear you say “Arrghhh!!!” Read the rest of this entry »

This is a continuation of the Making fancy website without Flash entry from a few days ago. To make the story short – I will try and show you some jQuery alernatives for popular Flash animation. Read the rest of this entry »

Flash

Adobe Flash is no doubt a favorite tool for a lot of web front-end developers and designers. It is widely supported on a variety of platforms and browsers and features a rich and cohesive set of tools and instruments. Some people even say it is the next evolutionary step of the Web.

Why not then?

Even though Flash is great, it has its drawbacks ( of course, I wouldn’t be writing this blog post otherwise ). Read the rest of this entry »

Rails fans out there?

It is no secret that CakePHP was born to implement the ideas of Ruby on Rails to the world of PHP – wonderful ideas, indeed, and I think we should pay tribute to the guys at 37signals.

But what CakePHP still lacks, in my opinion, is pure and complete DB abstraction. It is true that most recent versions of Cake ( v.2 RC3 as of now ) have done a lot in that area – the framework is now strongly decoupled from MySQL, although I personally have never heard of study cases that use Oracle, for example.

To the point – in a multi-developer environment it is critical to have a versioning control system ( you know you should be using git, right? ) and a database ‘versioning’ system – that is where Rails is much more powerful than CakePHP – it has database migrations. Read the rest of this entry »

Yahoo!’s Developer Theater has always been a priceless resource for web designers and developers. But what I have found the most useful video for me was Steve Souders’ High performance websites presentation. For those of you who don’t have the time to watch the whole video – here is a short summary.

Like many things in our Universe, web performance obeys Pareto’s 80-20 principle – 20% of the elements of a website cause 80% of the effects on the performance. And if we try to slightly reduce the time spent on loading those 20% of the elements, we can get much more than 20% increase in speed. Read the rest of this entry »