You might not have noticed, but I’ve retrofitted my website to follow the MVC pattern. What this means is that from now on I’ll be able to do my PHP/MySQL stuff on it, while keeping the designing part independent. This way I can keep writing scripts and whatnot, and not affect the layout.
As with any other MVC style websites I make, I start off with the global headers and footers. For that, I made a modified version of the original front page’s design to allow cramming of more content on-screen. I have made a test page using that view. So whenever I create new controller files, my constant parts of the layout will be kept, while the content for the pages change.
If you’re an coder and a designer, you might’ve heard of MVC architectural pattern (Model-Controller-View). It’s basically the separation of the program logic from the input and the presentation, allowing independent development, testing and maintenance of each part. In other words, if I only want to update the look, I don’t need to touch the scripts that involve the input and processing of data.
I’ve decided to ditch the “The Daily Random” concept since I already used that one before and it feels so old, so I’m going with my “TheDirtLab” idea as the main theme of my website, since I’m all about doing various coding junk! *lol*
Give me time and I’ll spruce up the front page with more content, and not just static content.
My next plan is to place everything into a PHP framework so I can work a lot easier within it.
If you’re interested on the technical aspect of the design, what I did was work with multiple “div” layers and set a picture as a background image on them. This allows me to overlay pictures on top of each other while allowing the background to be seamless and still be stretchable. This should work on any screen resolution.
I used JPEGs for the looped background images (the fence and the grass), while Dirt’s profile and the Title text are PNG images. The use of PNGs allow me to create an illusion of a coherent merging of all the pictures so I won’t have to make much modifications to the source images if I want to add more elements to the background… say for example I wanted to add a “dog house” into the background. What I’d do is to simply draw the dog house in photoshop, make the background transparent, save it as PNG and place it in its own DIV layer on the HTML code. It’s that simple!