Monday, 14 May 2012

daniellealmond.com v2



Following from a bit of over the top worrying I tend to do about my own work, I decided that my website could really be improved. So this weekend I set about updating the code to make it more dynamic and better socially connected. Without any knowledge of php or how to parse the RSS feeds this was somewhat of a problem however I managed to find a lot of other resources that were able to help.

Read on to see how I did it and all the tools I found to help me along the way.


Some of the more simple updates were only to the design. I removed the big header and replaced it with a simple back button when you navigate away from this page to avoid saying 'Danielle' too much, and I think it's a bit vain to have your own name in it too much. I also changed the font on the nav image and added a bit of texture to it as well as my social network icons.

Next I kept the Instagram and Twitter feed exactly the same as I was always happy with them.

Below this I managed after a lot of searching to find a Tumblr plugin that would work to display my latest Tumblr posts. Luckily it lets you customize the layout so it matched my Instagram feed. Next to this is the blog feed which I also haven't updated.

Below this I've added in a Digg stream. Dig have a really good highly customizable widget of their own which worked well here. Although it clashed with my own CSS meaning I had to do some more tweaks to get it looking the way I wanted it to. I thought Digg would be the best way to share all the links I find interesting rather than shouting them out on Facebook and Twitter to my followers and friends who I doubt are really interested at all. It does bother me that the content isn't centered and seems to be heavier on the left which I something to look at in the future, but I like the way Digg include a small thumbnail as for this I wanted to have more graphical content as it seems to be more engaging and interesting than text.

Next in the bottoms bar I added in a little Thank you for visiting graphic which I really wanted to go on the right hand side, and although the layout is completely customizable I was a tiny bit lazy and left as is after a few attempts I just wasn't working at all.

For the Pinterest image this also caused some issues. The plugin just crops to the image size you specify from the top left corner meaning that if I had displayed it in a 2x3 row like the Tumblr and Instagram feeds the majoirty of the content of the images would have been cut off. However the plug in does have a hover to enlarge function to deal with this but again this conflicted with the over flow properties on my CSS meaning that the rest of the template broke when I fixed this issue. To get around this I'm just displaying one image at a bigger size and hoping it's content isn't cut off. Although I really would have preferred the hover to work as it does look quite cool, this might be something I can look at in the future.

Next is the Linked In section but this was just a graphic so was relatively easy to do.

One thing I had to go through with every widget was making sure that it opened every link in a new window which was a bit tedious but I think important to keep it consistent and stop people from navigating away from the page.

Something else which came up again and again were conflicts with these plugins and my own pages CSS. However the firefox extention firebug really helped with this to select out the element and see which CSS rules are being applied to it and which have been over written either by externally controlled or internal rules. Although often I found that even !important didn't work to stop the clashes, but I managed to get around it in the end.

Another thing which only time will tell is how my plugins handle different types of content. For Tumblr this is working well so far with just reblogged images however I'm worried that embedd gifs, text posts, quotes and links, won't look very good in this layout. The same for Pinterest I'm not sure how many landscape images I pin or sometimes I may pin a really long image, these kinds of images may cause issues in the future, but that's all part of the fun I suppose...

Below is a list of the resources I used for this:

Next I want to update the Work page as I've just really gone off it now and think it can be improved... *le sigh*


Follow Me: Bloglovin', Google, Twitter

No comments:

Post a Comment

Thanks so much for commenting.
X

LinkWithin

Related Posts Plugin for WordPress, Blogger...
07 08 09 10
Pin It button on image hover