Roe Designs Redesign

[ronaldroe]

http://www.roedesigns.com

Well, at long last the site is finally launched. Please have a look and let me know what you think. I know I need content for the third section in the footer. I'm having a hard time coming up with something. I'm also working on the favicon.

Some notes about the design:

• I used a lot of media queries to keep the design looking good at various browser window sizes, including mobile. The most noticeable changes are in the header, but the entire structure of the page changes. Resize your browser and check it out.
• The slider on the main page does rely on images, but the content is there in semantic text, including headers, paragraphs and lists, it's just hidden. This allows me to use images and implement various effects, like the text gradient, but still have the search engine benefits of text.
• The portfolio page is all custom jQuery, which is a first for me. I have a number of sites in work that use custom jQuery, but this is the first to see the light of day.
• The background in the logo is an image, but the logo text itself is actual text, very carefully positioned.

 

[DHDdirect]

Hey Ron.. Looks good! how much to advertise?

The font face of the logo looks a big blocky, is that just the type of font used or is something else happening there?

The only other thing that stands out to me is the 'Hire Me Now' button. It's probably just me but it seems a bit demanding.

* Also some IE issues:
IE 8 - your menu has dropped off the header and centered itself. The menu text is below the colored bars so in the portfolio page the links are behind the content below it. And the Search button at the top has the text "Search" in the blue button. And of course no fall back to rounded corners but it doesn't look bad.
IE 7 - Everything above just not the part where the menu text is behind the content on the portfolio page.

 

[Phreaddee]

Looks good on android, but it doesnt resize automatically.
The portfolio looks nice too,
I guess my only suggestion there would be to close one item when u open another.
Nice tidy, simple easy on the eye site. Well done!

 

[ronaldroe]

Thanks for the input. I'll definitely change the text on the button. I was trying to go for POW, and I went too far.

DHD - You must've switched from IE8 to IE7 just as I was correcting that. I noticed it and corrected it just after I posted this thread. As far as the menu placement, I did that because IE 8 and below disregard media queries, and the menu runs into the logo when you resize it. I'll have to find another solution in the long term.

Phreadee - I couldn't figure out how to close the other boxes when opening another one. Here's my jQuery if anyone has suggestions:

$(document).ready(function(){
    //When gallery boxes are clicked, make them expand or contract
    $('.portfoliotitle').toggle(function() {
            //Expand boxes to 550px
            $(this).parent('.portfolio').animate({height: "550"}, "slow");
            $(this).children('.expand').html('▼');
            $(this).parent('.portfolio').children('.thumb').slideUp("slow");
            $(this).animate({marginLeft: "15"}, "slow");
        }, function() {
            //Return to original 60px
            $(this).parent('.portfolio').animate({height: "60"}, "slow");
            $(this).children('.expand').html('▶');
            $(this).parent('.portfolio').children('.thumb').slideDown("slow");
            $(this).animate({marginLeft: "75"}, "slow");
    });
});