Redesigned my personal site, care to look?

radiantm3 · Jun 30, 2008

You can see it here

Definitely not as bold as my previous design, but I wanted to focus on content this time around so I purposely kept the graphics to a minimum. Most of the details on how it was built is on the site, but feel free to ask if you have any questions.

The plan is to have a matching accent color scheme for every illustration I add to the site. If you look for the text links in the sidebar that say Blue and Green and click on them, you'll get an idea of what the plan is.

Again, I'd like to thank angelwatt for his regular expressions help.

lofight · Jun 30, 2008

radiantm3 said:
You can see it here

Definitely not as bold as my previous design, but I wanted to focus on content this time around so I purposely kept the graphics to a minimum. Most of the details on how it was built is on the site, but feel free to ask if you have any questions.

The plan is to have a matching accent color scheme for every illustration I add to the site. If you look for the text links in the sidebar that say Blue and Green and click on them, you'll get an idea of what the plan is.

Again, I'd like to thank angelwatt for his regular expressions help.

That's such a nice site! So is your portfolio one. But it might be a bit too wide for some people.

a456 · Jun 30, 2008

As per lofight I'd say width is an issue and that the typesize for entries could be taken down a notch or two to solve this.

radiantm3 · Jun 30, 2008

Yea the width was a conscious design choice that I made and won't be correcting because everything is on a grid. I'm totally aware that some will have to resize their browser to see everything, but I'm fine with that.

marbles · Jun 30, 2008

Nice enough site for sure but the width thing is irritating , why would you not 'fix' this so folks who see the site on smaller screens can see it without scrolling side to side

radiantm3 · Jun 30, 2008

marbles said:
Nice enough site for sure but the width thing is irritating , why would you not 'fix' this so folks who see the site on smaller screens can see it without scrolling side to side

What size/res is your display? The site width is 1150px (actual content within 1050px) which is not too wide unless you are running at 1024x768 or below. I can view the whole page fine on my macbook air with plenty of extra space. Also, about 90% of users who visit my site have resolutions above 1024x768.

Remember, this isn't a corporate site. It's basically my personal playground to experiment as well as tell a little about myself. But if everyone who replies in this thread comments about the width, I might consider it as being a more serious issue.

Lau · Jun 30, 2008

This is how it looks on a 12" iBook (1024x768), with a non-maximised window. I can get frustrated by sites being too wide, but as the main content fits in the browser and you only have to scroll to see the secondary content, I think it works well. It's not as if you have to scroll sideways constantly to read the content.

Also, as it's a personal site and most of your visitors have wider screens I would say it was less of an issue than a commercial site, too.

Looking good! (Although I've always liked your work

).

lofight · Jun 30, 2008

radiantm3 said:
What size/res is your display? The site width is 1150px (actual content within 1050px) which is not too wide unless you are running at 1024x768 or below. I can view the whole page fine on my macbook air with plenty of extra space. Also, about 90% of users who visit my site have resolutions above 1024x768. Remember, this isn't a corporate site. It's basically my personal playground to experiment as well as tell a little about myself. But if everyone who replies in this thread comments about the width, I might consider it as being a more serious issue.

Well yeah. But not everyone who has above 1024 px wide display used their browser on full width. I keep my browser on 1000 px wide from the 1440..

radiantm3 · Jun 30, 2008

Lau said:
This is how it looks on a 12" iBook (1024x768), with a non-maximised window. I can get frustrated by sites being too wide, but as the main content fits in the browser and you only have to scroll to see the secondary content, I think it works well. It's not as if you have to scroll sideways constantly to read the content.

View attachment 121708

Also, as it's a personal site and most of your visitors have wider screens I would say it was less of an issue than a commercial site, too.

Looking good! (Although I've always liked your work ).

Thanks.

Yea even though it breaks, you can still read content without side scrolling.

But, this whole width discussion has given me an idea. I'll [attempt to] create a smaller grid layout for smaller widths and have it auto-switch layouts based on your browser width. That way everyone is happy.

I really appreciate the feedback. Personally, I've never been bothered by varying website widths. I just hit the zoom button. But I guess I'm in the minority.

Lau · Jun 30, 2008

radiantm3 said:
But, this whole width discussion has given me an idea. I'll [attempt to] create a smaller grid layout for smaller widths and have it auto-switch layouts based on your browser width.

That sounds like a good plan if it could work. I wonder if one way to make it work would be to reduce the text size on the smaller width one. I know it's a design feature, but then I know I sit much closer to my 12" screen than I do my 24", so you could preserve that large bold text look on a smaller width even if you knocked it down a point or two.

angelwatt · Jun 30, 2008

Glad the regular expression stuff helped. Just a couple notes on the site:

There's a couple validation errors tied to some code. For JavaScript, put /*<![CDATA[*/ ... code ... /*]]>*/ around the code (inside the script tag) to make sure it passes validation. The beginning and end parts are commented out for compatibility with older browsers. Actually I just saw you have technique being used on a different script in the code, so yea, just do it that way.
There's a couple CSS errors as well, but most of them were purposeful except one. For the selector 'p.info strong' you have 'none' assigned, but that's not valid. If I remember right you need to use 'normal' instead.
I like the guitar guy you've got there. Is that your own drawing? I'm an art hobbyist myself. He reminds me of the hero from Chrono Trigger (it's the hair of course).

It's a nice personal site, nothing fancy and a clean look.

radiantm3 · Jun 30, 2008

angelwatt said:
Glad the regular expression stuff helped. Just a couple notes on the site:

There's a couple validation errors tied to some code. For JavaScript, put /*<![CDATA[*/ ... code ... /*]]>*/ around the code (inside the script tag) to make sure it passes validation. The beginning and end parts are commented out for compatibility with older browsers. Actually I just saw you have technique being used on a different script in the code, so yea, just do it that way.

There's a couple CSS errors as well, but most of them were purposeful except one. For the selector 'p.info strong' you have 'none' assigned, but that's not valid. If I remember right you need to use 'normal' instead.

I like the guitar guy you've got there. Is that your own drawing? I'm an art hobbyist myself. He reminds me of the hero from Chrono Trigger (it's the hair of course).

It's a nice personal site, nothing fancy and a clean look.

1. Thanks for that. I ran the site through the validator and couldn't figure out how to fix the errors caused by the double ampersands.

2. Changed the none to normal. That just slipped past my brain.

3. Yea that's one of my drawings. I figured having my character art as the main theme of the site would motivate me to come up with more drawings.

Thanks! I have a good start to build upon.

marbles · Jun 30, 2008

yeah unfortunately I'm running at 1024 x 768 , on a 20" screen too (hp w20) because the g3 iMac won't put out a higher res

so just me then

roll on me new macbook coming

InLikeALion · Jun 30, 2008

radiantm3 - Could you give me a hint about browser-size detection? That's something I've wondered how to implement, but never seen mentioned explicitly. I'd love it if you could point me in the right direction to learn about it.

radiantm3 · Jun 30, 2008

InLikeALion said:
radiantm3 - Could you give me a hint about browser-size detection? That's something I've wondered how to implement, but never seen mentioned explicitly. I'd love it if you could point me in the right direction to learn about it.

I haven't looked into it yet, but I've seen it be implemented before. I'm using the jQuery javascript library and I'm pretty sure someone has written one for it at one point. If not, I could probably write a simple one myself that checks the browser width once on load. Basically something like this:

If body width is less than ???px use this class.

angelwatt · Jun 30, 2008

radiantm3 said:
I haven't looked into it yet, but I've seen it be implemented before. I'm using the jQuery javascript library and I'm pretty sure someone has written one for it at one point. If not, I could probably write a simple one myself that checks the browser width once on load. Basically something like this:

If body width is less than ???px use this class.

This will get you what you need for most browsers.

PHP:

browserWidth = window.innerWidth || document.documentElement.clientWidth;

InLikeALion · Jul 1, 2008

angelwatt said:
This will get you what you need for most browsers.

PHP:

browserWidth = window.innerWidth || document.documentElement.clientWidth;

Angelwatt, can you add just a little more? I'm a html/css/learning-the-ins-and-outs-of-js guy and have a poor grasp of php. Even if you had a link to something that could explain the concept of how to use that code?

Thanks for always being willing to share your knowledge on these threads.

angelwatt · Jul 1, 2008

InLikeALion said:
Angelwatt, can you add just a little more? I'm a html/css/learning-the-ins-and-outs-of-js guy and have a poor grasp of php. Even if you had a link to something that could explain the concept of how to use that code?

Thanks for always being willing to share your knowledge on these threads.

That's actually JavaScript, I use the PHP markup simply for the text coloring. I should have made that clearer. I'm not aware of a way to find out this information from PHP.

What you do with the browser width I don't know for your situation. I haven't looked at your code, but if you have a div or some container for the entire layout you can do (with JavaScript),

PHP:

function AdjustWidth()
{
  var browserWidth = window.innerWidth || document.documentElement.clientWidth;
  var layoutWidth = '1100px'; // what ever default value you want
  if (browserWidth < layoutWidth) { layoutWidth = "900px"; }
  document.getElementById('container').style.width = layoutWidth + 'px';
}
window.onload = AdjustWidth; // have to wait till page loads

werther · Jul 1, 2008

I really like the site, it reminds of 'all that malarkey' for some reason. Just one question: On your 'content-sub div' you specify a border-top of black and 10px, what is the purpose of this? The header falls 100px but then in the sub-column the header appears to come down another 10px. It just seems awkward. I think the site overall looks fantastic though.

radiantm3 · Jul 1, 2008

werther said:
I really like the site, it reminds of 'all that malarkey' for some reason. Just one question: On your 'content-sub div' you specify a border-top of black and 10px, what is the purpose of this? The header falls 100px but then in the sub-column the header appears to come down another 10px. It just seems awkward. I think the site overall looks fantastic though.

It was a design decision. Its just a small cue to show the grid. I think the reason it looks strange is because the guitar happens to cover the other side of it.

If you happen to scroll to the bottom of the page, you'll see where it starts to come together. But I really think it's the illustration blocking the other corner that makes it look odd.

And yes, it does remind me of Malarkey's site as well. Definitely because of the grid, colors, and the fact that there's an illustration in the same area.

Once I get more illustrations + color palettes in, it should start to take it's own form.

ezekielrage_99 · Jul 1, 2008

I really like it, although I do agree with some posts about the width. Besides that it's an awesome design.

Also for the date titles and "Say what" what font did you use because it's a really nice choice.

radiantm3 · Jul 1, 2008

ezekielrage_99 said:
I really like it, although I do agree with some posts about the width. Besides that it's an awesome design.

Also for the date titles and "Say what" what font did you use because it's a really nice choice.

Thanks.

The titles are DIN served via SIFR.

Redesigned my personal site, care to look?

macrumors 65816

macrumors 68000

macrumors 6502a

macrumors 65816

macrumors 68000

macrumors 65816

Lau

Guest

macrumors 68000

macrumors 65816

Lau

Guest

Moderator emeritus

macrumors 65816

macrumors 68000

macrumors 6502a

macrumors 65816

Moderator emeritus

macrumors 6502a

Moderator emeritus

Suspended

macrumors 65816

macrumors 68040

macrumors 65816

Our Staff