Team 128's redesigned website!

Hello Chief Delphi! Recently I have taken on the task to redesign this into this

To create this I used Bootstrap (A great starting point for anyone). For the scroll effect used on the sidebar, I used SmoothScroll.js. And for the images I used ShadowBox.

It’s not done yet but the basics are ready, and I will be updating it over time.

Please tell me what you think! :stuck_out_tongue:

Hey iLloyd! I love what you did with the site! :] We have a member of our team who is working on redesigning a website and he would love a few tips when designing the site! :yikes: Love what you did with your team’s site!

From Varn_Barn_GMAN :]

Looks pretty good!

Only a small scrolling issue-- when you scroll down, that sidebar goes over text and generally causes a bit of visual confusion. I love the expand effect, but it doesn’t look nice when there are logos on top of words.

Other than that, looking pretty nice!

On http://www.grandviewfirst.com/media.html you should create small thumbnails for each image. Using the full file in the thumbnail causes the visitor to download the entire file. Even on broadband, it still took me almost a full minute to fully load that page. If your web server supports PHP, I highly recommend that you use this. If you need help, let me know.

I’m also getting the scrolling issue. Screen size is 2048x1152, using Google Chrome 24.0.1312.57 on Windows 8. Here’s a screenshot: http://puu.sh/22ffl

Could you provide a screenshot and your screen resolution? Thank you!

Thank you for your advice! Our webserver does in fact support PHP so I’ll look into it!

I don’t know if anyone knows jQuery but I am trying to change the width of “.affix” if the screen resolution is above a certain size. I got the code but it doesn’t seem to work. Any help?

<script>
$(document).ready(function() {

if ((screen.width>=2048) && (screen.height>=1152)) {
alert('Screen size: 1024x768 or larger');
$(".affix").css({"width":"7%"});

}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');

}
});
</script>

EDIT: Also I added the resize script. Just for giggles I mesured the before and after speed of the media.html page.

Before: 3.30s
After: 0.92s.

Holly smokes! A reduction of 2.38 S. Thanks, synth3tk!

Just wanted to update and say I fixed the problem with the side navigation leaking into the content. Thanks, synth3tk and sentientfungus.

If your wondering how I fixed it.

No problem. Glad to see you got TimThumb working! It’s one of my favorite “tools” in my virtual toolbox.

We recently redesigned our website also! See here: http://www.team708.org

Please open your own thread for your team’s website. It’s slightly rude to “hi-jack” someone else’s thread.

If you need help creating a new thread, let me know.

I am so glad you told me about TimThumb. Definitely going in my “toolbox” as well. Still having a few bugs but hopefully going to get those ironed out. Also, am I the only one who loves to look at Google Analytics and just be amazed at all the stats I have in front of me?

No, you’re not. It’s even more awesome once they introduced entrance/exit pages and the “story” mode. It’s interesting to see in what order people browse your site. It helps to also figure out which browsers/technology you should focus on, once you have enough data.