I've been wanting to revamp my website (all two pages of them) and blog design for a while now. I wanted a cut down basic look which I'd seen on other sites. I'm not shy, and 'imitation is the sincerest form of flattery' right !?
Most of the other sites I'd seen sat on Wordpress. I toyed with this and even tested the theory using an AWS cloudformation Wordpress stack. Which incidentally worked really well ! But I've committed to blogger so wasn't going to going to switch that part and learning another platform just for a few pages seemed excessive. Although in hindsight probably less than the path I took.
I started to mess around and build up some html/css. One of my targets was to get a functioning menu rather than the multiple image hack I'd put together before. Reason : I'd stand more of a chance of getting the Google search sub-headings. Thinking about it I don't really know 'why' I want them, but that's now irrelevant.
I found this http://blog.vogtjosh.com/post/2990652547/css3-animated-drop-down-menu which has a really nice looking transition menu - well, I say nice, nice on SOME browsers. Basic on others (looking at you Microsoft).
De-constructing the CSS to get the look I wanted was not quick. A steep learning curve which went back and forth as the smallest change broke the look in different browsers.
I applied the same fade look to the social icons, again, that took ages and often meant going back to square one. Mostly due to my crap web skills but also because of very different behaviour across browsers and because I didn't do any revision control.
Persistence paid off and its mostly finished with the main page, picture gallery and blog all with a similar look. There are a few bugs which I need to look at and I need to clean up and better annotate the CSS. But mostly I'm happy with the result, especially in Chrome, IE - pah, who would use that as a browser now anyway. And I also learnt some new skills which is always nice.
No comments:
Post a Comment