My site (re)redesign

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 2430 Views - Last Post: 29 October 2011 - 11:17 AM

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

My site (re)redesign

Posted 02 September 2011 - 10:14 PM

Hey guys, I'm back with a redesign of my site. I completed the design part about mid way through July. The URL is http://www.terryjune.me/. I planned on putting a blog on the homepage, but I kind of got out of programming. I'm incapable of learning new things, so I'm just going to take a break from it now. I thought I would share this with you guys before I do take a break from it.

Is This A Good Question/Topic? 2
  • +

Replies To: My site (re)redesign

#2 angrydwarfz  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 60
  • Joined: 07-December 08

Re: My site (re)redesign

Posted 03 September 2011 - 12:57 AM

Hey, the site looks pretty nice and professional, although it would be nice to see some more content! ;)
I really dig the tiny labels that pop up when you hover over a link.
However, the website is really borked in IE, even in version 8. It doesn't have to be like this! Hehe.

There's a really useful 'starting kit', if you will, out there that aims to reduce the problems caused by IE<10. The HTML5 Boilerplate contains stuff like a CSS reset, the modernizr js library and a bunch of other nifty stuff that make the dev process a little more bearable. ;) Technically, it allows HTML5 elements to be used even in IE6 without too many problems. (along with many other little fixes)

CSS3 is a different thing. CSS3 Pie helps a little bit, but with quite a slowdown, and even so, the effect achieved isn't as good looking as in, say, a Webkit browser. Then again, a missing box shadow never really destroyed anyone's layout. :P

As for the blog, you could always install Wordpress, or, as an added challenge, you could try coding your own, simple, blog system, hehe. ;)

Cheers,
AD

This post has been edited by angrydwarfz: 03 September 2011 - 12:58 AM

Was This Post Helpful? 0
  • +
  • -

#3 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 03 September 2011 - 08:43 AM

Yeah, I'm not trying to support IE 8. I will try and support IE 9 and above. I just don't really care for IE and do see it worth my time to make my site even somewhat compatible with it. Ew WordPress. I used to make my own blogs and I was working on a CMS, but as I said, I've quit programming, but I may start again by finishing that project in the future. Thanks for the reply.
Was This Post Helpful? 0
  • +
  • -

#4 hulla  Icon User is offline

  • Writing Lines


Reputation: 49
  • View blog
  • Posts: 732
  • Joined: 05-March 11

Re: My site (re)redesign

Posted 04 September 2011 - 08:30 AM

I also like the mouse-over popups :)
I'm also planning on getting MW3 (Modern Warfare 3) sometime after it comes out. ;)
Was This Post Helpful? 0
  • +
  • -

#5 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 04 September 2011 - 11:10 AM

I actually made a tutorial earlier today on how to implement them into a site. Hopefully it gets approved. Yeah, MW3 isn't my top priority (BF3 is), but I'll more than likely get it a few months after it comes out.
Was This Post Helpful? 0
  • +
  • -

#6 josh06  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 14
  • View blog
  • Posts: 139
  • Joined: 27-October 06

Re: My site (re)redesign

Posted 07 September 2011 - 04:48 AM

I Love the navigation and header bar at the top! The font is great. However maybe pad the logo out a bit so it isn't hitting the top of the page?
Also, in the about bit. It's just a load of text! Kinda hard to read, play around with the font size and the line height in the CSS and maybe give it a white background or something.

Otherwise, very nice ;D
Was This Post Helpful? 0
  • +
  • -

#7 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,307
  • Joined: 07-September 06

Re: My site (re)redesign

Posted 12 September 2011 - 09:54 AM

A few things (IE 9):

First, the content of the main page doesn't seem to load in IE9.

Second, I agree with josh06, the logo should have some padding so it doesn't go off the top of the page.

Third, on your projects page, the bottom images overlap (well, their borders overlap) with the copyright. While the copyright is on top it is still a bit detracting from the flow of the page. Moreover, the tipsy popups cause the page to scroll which changes the width of the page and causes an annoying jumpy effect. Actually, in Chrome, the text and images overlap directly, so this appears to me to be a bigger problem there.

Fourth, tipsy seems to take forever to load on the pages. When it finally does it seems nice, but just that I have to wait so long before actually seeing the page as it is supposed to be viewed is a little annoying. Additionally (and this may be a problem with the tipsy library), it appears that you have failed to cancel animations when you mouse over, then off and over again on the same object (it fades in, then out, but starts fading in before it finishes fading out then finally disappears altogether).

Fifth, the about me page. It appears that the about me page will need to be updated frequently (since you are talking about what video games you are looking forward to getting and things of that nature). This isn't a big thing, but you may want to have something that is slightly longer lasting.

Onto the style now:

The background is nice, I like how it adds a subtle pattern and texture while looking at the page. It is also a nice light blue/ grey color which is appealing. The navigation bar at the top is also well done, I like how the social icons and other page links are clearly visible, easily readable and simply descriptive enough that I don't have to question what I will get when clicking the link.

The logo image is nice, but I would suggest changing it out with an actual image instead of using external CSS font files to change the font face when the page loads. This requires that the page loads the text files before it can change the face of the font. It isn't a major thing, but on a slower connection it is visible.

The main content area I am going to suggest you look into adding a white brackground of about 20% opacity to so that there is a clear division between where the content will be and the background. This will make the background slightly less visible, but it will also define the site a bit more. It is up to you of course if you try it, but I think it may make reading and focussing easier.

That is about it, overall I think it is a good design, just has a few things that I would consider and touch up along the way. Keep it up.
Was This Post Helpful? 1
  • +
  • -

#8 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 12 September 2011 - 12:32 PM

josh06 said:

I Love the navigation and header bar at the top! The font is great. However maybe pad the logo out a bit so it isn't hitting the top of the page?
Also, in the about bit. It's just a load of text! Kinda hard to read, play around with the font size and the line height in the CSS and maybe give it a white background or something.

Otherwise, very nice ;D


I'm sorry man, I didn't notice this notification in my email. Thanks. I did notice a padding problem with the logo in IE9, I'll work on that. Would increasing the font size or line height make it better? I've increased the line height before.

View PostBetaWar, on 12 September 2011 - 12:54 PM, said:

A few things (IE 9):

First, the content of the main page doesn't seem to load in IE9.

Second, I agree with josh06, the logo should have some padding so it doesn't go off the top of the page.

Third, on your projects page, the bottom images overlap (well, their borders overlap) with the copyright. While the copyright is on top it is still a bit detracting from the flow of the page. Moreover, the tipsy popups cause the page to scroll which changes the width of the page and causes an annoying jumpy effect. Actually, in Chrome, the text and images overlap directly, so this appears to me to be a bigger problem there.

Fourth, tipsy seems to take forever to load on the pages. When it finally does it seems nice, but just that I have to wait so long before actually seeing the page as it is supposed to be viewed is a little annoying. Additionally (and this may be a problem with the tipsy library), it appears that you have failed to cancel animations when you mouse over, then off and over again on the same object (it fades in, then out, but starts fading in before it finishes fading out then finally disappears altogether).

Fifth, the about me page. It appears that the about me page will need to be updated frequently (since you are talking about what video games you are looking forward to getting and things of that nature). This isn't a big thing, but you may want to have something that is slightly longer lasting.

Onto the style now:

The background is nice, I like how it adds a subtle pattern and texture while looking at the page. It is also a nice light blue/ grey color which is appealing. The navigation bar at the top is also well done, I like how the social icons and other page links are clearly visible, easily readable and simply descriptive enough that I don't have to question what I will get when clicking the link.

The logo image is nice, but I would suggest changing it out with an actual image instead of using external CSS font files to change the font face when the page loads. This requires that the page loads the text files before it can change the face of the font. It isn't a major thing, but on a slower connection it is visible.

The main content area I am going to suggest you look into adding a white brackground of about 20% opacity to so that there is a clear division between where the content will be and the background. This will make the background slightly less visible, but it will also define the site a bit more. It is up to you of course if you try it, but I think it may make reading and focussing easier.

That is about it, overall I think it is a good design, just has a few things that I would consider and touch up along the way. Keep it up.


Yeah, I'll be adding padding to it. Overlap, can you take a snap shot? I've heard problems with the method I use to get the copyright to stick to the bottom where if the content overflows the y then it will overlap. Do you know of another method? I'm unable to reproduce that problem with Tipsy, could you take a snap shot o it? I actually built it in Chrome and I never had that issue. I know that this seems repetitive can you show me a screen shot of that? (I'm better at finding solutions if I can see the problem, I hope you understand). I don't know if it's a problem with the tipsy plugin or not, the reason I used it was to hide things that weren't really important, but if people needed to see it they could hover over the object. I was actually building a CMS before making my site. I have since then stalled the project. My site was going to be the first site built with the CMS. So every page was going to be dynamic. The homepage was supposed to be a blog. I may just make the homepage the projects page. Yeah, I like minimal designs, I see mine as somewhat minimal, but has a lot on it. The reason I'm using text instead of an image is that it's easier for me to work with, it really isn't that important for me if the text doesn't work, (just look in in IE 8 XP). I don't know if putting the translucent white color will be great looking, but I'll try it out and post a snap shot. Thanks to both of you for contributing and helping me to make decisions on my site.

This post has been edited by EnvXOwner: 12 September 2011 - 12:32 PM

Was This Post Helpful? 0
  • +
  • -

#9 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,307
  • Joined: 07-September 06

Re: My site (re)redesign

Posted 12 September 2011 - 07:24 PM

Yeah, here is a snapshot. I went ahead and took one with each of the 5 major browsers. It appears (at least on my system) that IE is the closest to correct.

Attached Image

As you can see the copyright text is overlapping the images.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#10 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 13 September 2011 - 03:34 AM

Ah. I see. I think that I was able to fix that by adding padding to the bottom of the content area. I also fixed the logo issue by adding little padding to the top of the h1. I'll finish the design a little bit later and get it uploaded (I have school).
Was This Post Helpful? 0
  • +
  • -

#11 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 13 September 2011 - 06:28 PM

Okay guys, instead of taking a snapshot, I decided to upload the site. You can see what I have so far at http://terryjune.me/. I'm also thinking about adding tutorials I do to my projects page, but in a category like my other stuff.
Was This Post Helpful? 0
  • +
  • -

#12 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,307
  • Joined: 07-September 06

Re: My site (re)redesign

Posted 30 September 2011 - 07:37 AM

I think it looks pretty good. An improvement from the last version (though there are just slight differences). I would only make 1 change to the site at the moment: Add about a 5 pixel padding to the white (very transparent) content box. That way it will stick out slightly more on the left side.

Other than that it looks pretty nice to me and I don't have any other major (or even minor) things to change at the moment. Looks good.

You should totally add the tutorials you have done. It would be a nice way to add more content and they were written by you after all so there is no reason not to have them on your site.
Was This Post Helpful? 0
  • +
  • -

#13 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 30 September 2011 - 12:28 PM

Thanks, BetaWar, I'll add that on there. I'm actually going to add a blog to it for my web design class (technically I don't have to make a blog, we have to write a web page where we review something, I asked my teacher if I could just make a simple blog) I plan adding tutorials I have on here and tutorials I do on YouTube on there.
Was This Post Helpful? 0
  • +
  • -

#14 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 01 October 2011 - 02:39 PM

Alright, I've added the 5px of padding, I also have a lightweight blog that I just made on there.
Was This Post Helpful? 0
  • +
  • -

#15 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: My site (re)redesign

Posted 10 October 2011 - 04:43 PM

I now have the blog running on a rather unstable version of a CMS I've been working on called Lithium, it's been working like a charm though :P
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2