The theme is up and I am sure you have noticed that the whole structure of the site has changed as well. It is not even called blog anymore. Let me tell you why.
Design
I am not in the state where I am able to produce site in a 911 Porsche quality which means that my designs still gets kinda old after some time. Why the comparison with 911? Because designer of that quality can produce product which looks excellent after years and years in production. The other aspect is that we all learn. We learn how to use Photoshop better, how to code our CSS, HTML, PHP cleaner and mainly we learn that jQuery is fun to use. I always to try to put all the knowledge I managed to get during the last year into a new version of my site. I hope I went the right direction this time and you like it.
The structure
The structure of the site went through major rework. Firstly I could see from google analytics that people are most interested in my work, the about section and after that the blog articles. So that is why the new site’s focus is on my work. The header presents my Photoshop skills and the portfolio section has now more space with the case studies and also the home page section People were not interested that much in my books collection or photographs. I must be honest I have not updated the book section properly for a long time and the photos section had only a few photos so the user’s interest in those other pages makes completely sense.
WordPress
You might wonder if the site still uses WordPress as it does not really look like stadard WordPress sites anymore. Yes it does and what more it uses WordPress lot better way. Previously I was only using WordPress for blog section, the other pages have been hand-coded. The current version uses “wordpress pages” for the portfolio section. Where I have created structure (you might get that from urls) where the tree starts with portfolio page which has daughters pages customers & private they have daughters pages sites & identity. That means that my portfolio pages sits and the end of this tree structure and they are also parent pages for cases study page. That helps me to display the list of portfolio pages with links to their case studies and I can also display list of other case studies inside the case study page. Basically it gives me lots of flexibility.
So I use Wordress with quite a few plugins but in same cases I could not find the plugin which would provide the result I needed so I have just hand-coded the php functions to get what I wanted. This was actually one of the main reasons I went to php courses last year so I could tweak my site which every way.
jQuery
I have used jQuery during the last year a lot in a various projects and it is really fun to work with. On this site I use jQuery exclusively but you might be surprise I do not use any jQuery plugins. You might ask why? Because in many cases the plugins are trying to deal with all possible scenarios which might happen but I know exactly what is going on on my site and using different plugins for different effects would just created additional http requests. I am guessing not every one has discovered all the javascript spice I am using in here. So let me summarize where I used js. The obvious parts is the main header and the portfolio tabs and nav on the home page. Then there is the fadeIn/Out on the articles. Clicking on the “topics” button will bring you another js content. Once you are on the article page itself you might have noticed the layout switcher comments. This also work the same way by clicking on the arrow bellow the individual comment but what more it brings the comment you clicked on into focus. Then we have a quite innovative up & down arrows in the article box itself which scrolls the article so you can read the whole content. (Some work still needs to be done in this section as it allows you to scroll even where there is no more content.) Another function brings the focus on form once you press add comment. There is also function which take cares of changing bg colours during the onclick events and form validation. Another innovative thing I have implemented here and I have not seen it anywhere else is the photo and video section in the sidebar. The same effect could be achieved uses WordPress custom field functionality but I am doing it different way because I would have to go through all blog posts and change every single one. Once the page loads I grab all the images and video with jQuery then clone them and insert them into the sidebar, afterwords I remove the original elements from DOM.
Portfolio section has again a layout switcher and also the content switcher which I have not finished yet, you can see it is grayed out. At the end the archive is using the same fadein/fadout function which is used on the home page. As you can see there is quite a lot of javascript so it would not be great if I use plugins for all of these.
CSS
If you sould check the source code of my CSS file you would see that I have changed my roles and I now do CSS in a single row for singe element where it also reflects the page structure. I only used one CSS file as this is very small site and there is not need to generate more http requests. There is also another CSS for IE7 which just a very few lines. There is no CSS for IE6 as I do not have that type of visitors, thanks god.
CSS sprite
Another quite innovative thing I used on this site is CSS sprite. You might be asking what is innovative about CSS sprites when people were using them for years. But have a look at the screen-shot and you will get the idea. There is lots of talk online how sprites are useful but not that many sites are using them. I use them in quite extreme way where almost everything is part of one huge sprite. This is the way yahoo or google is doing it. As you probably know having a sprite like this means only one http request and also the clicking on any other page the images has already been cashed so they are not loading from scratch but more importantly the reduction of size is massive. If I had these images separately they would be probably 3 times the size of the sprite.
Yslow and optimization
All these changes I have made had very good effect on the loading speed and the way the site is optimized. It has all A grads from Yahoo Yslow except the Gzip which I am not able to change as it is the problem which needs to be fixed on the server side. To be honest I was quite surprise that the Yslow was not complaining about the size of the home page as those 5 huge images in the header just make the page quite big. I guess these days the site which is bellow 1MB is fine. I was trying to compress the images lot more but the result was not great and I have even tried to load them with Ajax after the page loaded but I had some issues with it but I guess that could be solution for the future.
Thank you
As you can see there are few thing which still needs to be fixed but I am really happy with the way the site come out. Thank you all for nice tweet messages, for nice comments on social site and also big thank you to all these CSS galleries out there who are promoting the site to new users. Thank you, thank you, thank you.
