Live Redesign

It’s this time already and I am about to start chopping the new design. I have taken a local copy of all the server files and have setup everything so as soon as I press save the file is automatically uploaded back to the server.

I can’t wait to see the new design up and running so I’m going to get started, underneath here should be the live blog section where I will post small updates to what I am doing. I will keep my eyes on the comments if you have any questions.

Thank you for coming to check my progress and please remember to share this with as many people as you can.

19.32

Im just working on the post titles right now

19.32

The LIVE redesign of ValidateThis is coming along nicely. Just been adding some more behind the scene bits

14.06

The header is coming along nicely, still not sure on this menu. Will it do for now?

12.46

Just messing around with the header and my mountain like effect. z-indexing used to be hard but I find it really easy now

11.57

Ok it’s setup but I will re-active it only when it is needed

11.47

This cookie control is stupid. The web should be open and about Conventions not Requirements

11.35

Just adding in some Cookie control to ValidateThis to make sure I comply with the new EU Law :-(

11.31

Woah that looks funky… A massive header!

09.15

What’s everyone upto today? I’m just about to start working on http://www.validatethis.co.uk again, getting closer to finishing it

21.43

Had to resort to an extra div but the end effect is there… I bet this looks horrible on a mobile upto yet haha

21.28

The share box looks great here http://www.validatethis.co.uk/news/join-along-with-our-live-redesign/ but Im having to rethink, try liking on FB, ideas?

20.58

Now to get rid of the AddThis wordpress plugin as it seems to be added to every Liveblog entry aswell

20.57

Ok I think that’s good, what you think? looks better in firefox http://www.validatethis.co.uk/news/join-along-with-our-live-redesign/

20.43

Check out the new share box in Firefox and then Chrome… Firefox seems to do a better job at clipping 😉

20.19

Points to anyone who knows the best way to vertical align text inside a single element. Not wanting line-height as it could be 2 lines

20.12

Want to follow along with what I’m working on? Go to a single blog entry (not the homepage). Just before the comments 😉

20.05

And were back, LIVE redesign of http://www.validatethis.co.uk Day 3 is gonna be a short one but its a labor of love so why not get a few hours in?

21.51

I have just identified a problem with the site that is affecting speed, but I will do all the speed optimizations in one go

21.31

Just about to setup #Chrome remote debugging on my #Android tablet. Gotta love these features thanks @paul_irish @ChromiumDev @googlechrome

21.11

A nice and simple footer for http://www.validatethis.co.uk

20.03

Its looking good up to yet, now onto the footer text and logo

19.37

I’m just working on the footer now, check out the CSS3 circles complete with clipping

18.43

Pc…. sooo…. slow…

17.48

Ooohhh it looks pretty being all dark! O_o

17.03

The white theme is growing on me, so I will create a theme option to easily switch back if I want to. TwentyEleven has these built in

16.39

Just about to start working on www.validatethis.co.uk again in my live redesign. Just getting a plan together for the next step and mobile

23.11

Well work on www.validatethis.co.uk is done for the day. I will pick up where I left off after work tomorrow. What do you think upto yet?

20.31

Now to add a background vignette effect. Anyone see any examples of this in the wild?

19.49

Ok so the sidebar is complete now, minus a few tweaks, but the look of it is there, check it out http://www.validatethis.co.uk/

19.02

That’s both of the Twitter box’s complete, along with custom JS.. What do you think?

tweetsbox

17.46

That took longer than I though, but I now have a list of recent followers, quick share to all your friends so they can be on it

16.52

Just creating some Javascript / jQuery to get a list of my recent followers and display then just how I want them :-)

15.56

It need some tweaking but it works now, AuthorBox complete http://goo.gl/kUgZo @andrewbeniston

15.37

Now the author box is dynamic lets test it for a different user! @andrewbeniston

14.57

Just getting the user data in wordpress with a set variable and falling back to a default profile if its not set $curauth = ($currentAuthor) ? get_user_by(‘id’, $currentAuthor) : get_user_by(‘id’, 2);

14.43

That’s the static version done, now to make it dynamic. Still want one extra effect but it can wait until later today

authorbox

14.18

I can already see where I can optimize thing, but I will leave them for now and write them in to articles explaining why

13.40

Check out my pure #css3 hello my name is sticker http://goo.gl/2mycp, nearly finished with the author box now

13.00

Chopping sprites is fun! Just got all the images ready for the author box

11.57

Base widget styling is done, onto my new author box, static at first then make dynamic with wordpress author info

11.42

The widget area is coming along nicely, just added some CSS3 transitions but only working in #ff at the minute

11.07

The widget sidebar is coming along nicely, still some tweaking needed

10.22

Working through someone else’s theme is weird at first, until you start getting your head around it

09.27

First, copy the TwentyEleven theme as a starting point and customize the settings

09.13

Testing, testing, 1,2,3! Does the liveblog work?

  • http://twitter.com/ArtWorked/status/201620738468364288 ArtWorked (@ArtWorked)

    @AaronLayton I would never use WordPress default theme as starting point, Although I know many do. It’s a messy theme :)

  • Dylan Cook

    Would it not have been quicker for you to build it from scratch, so its your way of coding and there are no nasty surprises? Or am I just being a control freak a usual 😉

    • http://twitter.com/AaronLayton Aaron Layton

      Nah it would have been better for sure, but would have taken longer… When I started redesigning I was only going to change a few colours and images… then I just started adding more to it

  • Roberto

    I like the new design. Looks great in SG2 :)

    Finally was an easy update. True?

  • http://twitter.com/thrik/status/201643844461268992 Ryan Williams (@thrik)

    @AaronLayton They look good. Think I can see where this is going based on the teaser header image 😀

  • http://twitter.com/thrik/status/201675098422386688 Ryan Williams (@thrik)

    @AaronLayton Love it, very cool idea.

  • http://twitter.com/HPuttick/status/201767646469955584 Henry Puttick (@HPuttick)

    @AaronLayton r u making that for desktops only atm. On the iphone parts are weird looking. :/ looks good though.

  • http://twitter.com/tanguy_martin/status/201768252727246848 Tanguy Martin (@tanguy_martin)

    @AaronLayton I like the effect when you hover on the social media icons

  • http://twitter.com/SmudgeGD/status/201837926806597632 Smudge (@SmudgeGD)

    @AaronLayton looking good on desktop… some funkiness going on in mobile!

  • http://twitter.com/DuffleDoe/status/202073867647336448 Deon Thomas (@DuffleDoe)

    @AaronLayton very cool!

  • http://twitter.com/2toria_webdev/status/202128220701720576 Webdev @ 2toria (@2toria_webdev)

    @AaronLayton Looks great in Chrome/Firefox, but it seems broken on Safari on the iPad. Just a heads up.

  • http://twitter.com/2toria_webdev/status/202156114027098112 Mat Richardson (@2toria_webdev)

    @AaronLayton I wondered about that before. Seems to take a long while to load all of the tweet/G+ icons into your twitter feed..

  • http://twitter.com/ArtWorked/status/202302345797836800 ArtWorked (@ArtWorked)

    @AaronLayton I bet it still better than an over priced MAC !

  • http://twitter.com/ArtWorked/status/202303148784758784 ArtWorked (@ArtWorked)

    @AaronLayton good luck mate, it must be quiet challenging but impressive concept and work 😉

  • http://twitter.com/micahgodbolt/status/202493751485145088 Micah Godbolt (@micahgodbolt)

    @AaronLayton display table cell?

  • http://twitter.com/stevenschobert/status/202495239712284672 Steven Schobert (@stevenschobert)

    @AaronLayton have an example?

  • http://twitter.com/OMGCarlos/status/202495315994095616 Carlos Ramos (@OMGCarlos)

    @AaronLayton Easiest way would be to set “display: table;” or “display: table-cell;” and then “vertical-align: middle;”

  • http://twitter.com/vrutberg/status/202500721462099968 Viktor Rutberg (@vrutberg)

    @AaronLayton padding-top and padding-bottom perhaps?

  • http://twitter.com/derSchepp/status/202502950692732928 Christian Schaefer (@derSchepp)

    @AaronLayton nope, you need at least two.

  • http://twitter.com/Woellchen/status/202530492476698624 Patrick Schmidt (@Woellchen)

    @AaronLayton display: table-cell; vertical-align: middle; i think

  • http://twitter.com/tiffany_tse/status/202539445273112576 Tiffany Tse (@tiffany_tse)

    @AaronLayton I like the idea of doing a live redesign. Cool stuff. :-)

  • http://twitter.com/sreejesh_kv/status/202704854282534912 sreejesh kv ✔ (@sreejesh_kv)

    @AaronLayton display:table-cell with vertical-align:middle ?

  • http://twitter.com/thrik Ryan Williams

    Looking mega right now. 😀

    • http://twitter.com/AaronLayton Aaron Layton

      It’s getting there slowly… 

  • http://twitter.com/thrik/status/204186049390456832 Ryan Williams (@thrik)

    @AaronLayton Don’t know if it’s changed, but last year the ICO said their enforcement will be minimal until web browser controls improve.

  • http://twitter.com/thrik/status/204186447752867840 Ryan Williams (@thrik)

    @AaronLayton As in you get letters if someone reports you, not fines. Also it only affects non-essential cookies (ie: analytics).