Redesigned my personal site, care to look?

Discussion in 'Web Design and Development' started by radiantm3, Jun 30, 2008.

  1. radiantm3 macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #1
    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.
     
  2. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #2
    That's such a nice site! So is your portfolio one. But it might be a bit too wide for some people.
     
  3. a456 macrumors 6502a

    a456

    Joined:
    Oct 5, 2005
    #3
    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.
     
  4. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #4
    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. :D
     
  5. marbles macrumors 68000

    marbles

    Joined:
    Apr 30, 2008
    Location:
    EU mostly
    #5
    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 :confused:
     
  6. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #6
    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. :p
     
  7. Lau Guest

    #7
    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.

    Picture 6.png

    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 :D).
     
  8. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #8
    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..
     
  9. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #9
    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. :cool: 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. :)
     
  10. Lau Guest

    #10
    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.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Glad the regular expression stuff helped. Just a couple notes on the site:
    1. 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.
    2. 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.
    3. 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.
     
  12. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #12
    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.
     
  13. marbles macrumors 68000

    marbles

    Joined:
    Apr 30, 2008
    Location:
    EU mostly
    #13
    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 :p roll on me new macbook coming :D
     
  14. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #14
    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.
     
  15. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #15
    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.
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    This will get you what you need for most browsers.
    PHP:
    browserWidth window.innerWidth || document.documentElement.clientWidth;
     
  17. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #17
    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.
     
  18. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #18
    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
     
  19. werther macrumors regular

    Joined:
    May 15, 2006
    #19
    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.
     
  20. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #20
    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. :p Once I get more illustrations + color palettes in, it should start to take it's own form.
     
  21. ezekielrage_99 macrumors 68040

    ezekielrage_99

    Joined:
    Oct 12, 2005
    #21
    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.
     
  22. radiantm3 thread starter macrumors 65816

    radiantm3

    Joined:
    Oct 16, 2005
    Location:
    San Jose, CA
    #22
    Thanks. :) The titles are DIN served via SIFR.
     

Share This Page