Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Matt Campbell
9,767 PointsCan you guys test and critique my page please?
Hey guys and girls,
If you have a second, can you take a quick look at this page:
http://ultimategamingparadise.com/
It's a new site for the UK that's launching soon and this is the splash page that'll sit online till it's launched properly.
Taken a bit of work. 14 media queries and 700 lines of CSS, not to mention some hefty image reworking to get the page size down from 22mb to 2mb.
I'd be particularly interested in anyone who has a resolution over 1920 x 1080, letting me know if spacing and layout remains on point.
Otherwise, feel free to critique all you like and hey, if you're in the UK and want to see the finished product, pop your email in the box!
The contact form success message I know needs sorting. Got some funky CSS to do to make it show up in the input box!
Thanks guys.
6 Answers
Derrick Mull
18,518 PointsNot having a way to sign up for updates via mobile view could be fixed, IMO. Lots of footer area white space in portrait view on my Galaxy Nexus(which if the content area fills the view after launch, then not that big of an issue).
Jah Chaisang
7,157 PointsNice work! The loading speed is in fact impressive, given how many images you have. I think it is nice as is, but if you are looking to improve upon it, here are some comments.
- I guess the twitter link is not yet set up?
- On my chrome the footer got cut off without a scroll bar to go to the bottom. In larger screen, it looks fine. Is this intentional?
- I think one whole row of images in the footer can go. Vertical spacing is quite packed. I'll sacrifice one row of images and leaving more white space in the middle. The most important content of the page is the launch date and the sign-up twitter call-for-action elements. Make them big and surround them with lots of white space will draw attention to these crucial elements. If you expect to have different amount of white space after launch, then do another template for after launch. I don't think the pre-launch and after-launch pages should have the same design if they serve different purposes.
- I'm not sure what you want to accomplish with the header. Is it some kind of gaming reference I don't get? I mean it seems complicated but not pretty, IMO.
Matt Campbell
9,767 PointsHey Jah Chaisangmongkon.
Twitter is now working as it should. I changed the Twitter user name earlier and didn't update the links. Also found some weirdness going on with the contact form above overlapping the Follow Us and Twitter logo rendering the link dead. All working now!!!
The cut off is intentional yes. The top row of images gets hidden behind the middle band where the content is. It's a collage effect. As long as the blue line and shadow remain on top of the images, that's all good. It's absolutely positioned relative to the bottom of the band.
What resolution are you viewing on? On some resolutions, almost the entire top row of images in visible. On smaller resolutions, that entire bottom section of images goes and the number of image gets reduced from 10 to 5 to 4 to 2.
The header logo works really well in the final site's design.
This page is entirely for the holding page. The finished site will have zero resemblance to this page so don't worry about this looking like the final site.
Thanks for the comments, really appreciate them and the image compression was hard work, took some time but got it down to 1.65mb from 22mb so that's all right. :)
As this is only for 19 days and a few hours, I'm not wanting to spend days on it. I've got the main site to work on.
In future, it will be developed further and optimised. My intention is to animate the images with jQuery but as I said, this is not a priority. As long as it works, as in it doesn't break at resolutions, and it does look good, I'm super happy!
:)
Jah Chaisang
7,157 PointsLooking good! I'm on 15" mac pro retina display, so that'd be 2880×1800, I guess? I do notice the image number changing as your screen width changes. Fancy! :P
Matt Campbell
9,767 PointsJust hiding images depending on width via media queries. Got 14 media queries in total. Taken a long time working through all the break points.
Thanks for your comments again Jah. I hadn't noticed the images missing. Was just an oversight on my part, copying and pasting code around my files.
Matt Campbell
9,767 PointsRealised what you were saying Jah, I've sorted it now so that the bottom sliders are there on all resolutions.
Matt Campbell
9,767 PointsCouple of more tweaks for devices
Tata Cheng
8,787 PointsHi Matthew,
I like the header and the colour scheme of the website. But there are quite a few alignment issues. My screen res is 1366x768 and I'm using Firefox.
The container with all the text (and the header) are not centered. It's a little more over to the right and there's a lot of space on the left. The sidebar is ok in regards to line height and everything. But I can't see the little twitter icons that come up when you hover over the lowest post, it's covered by the blue thing at the bottom.
On the left side where the main content is, there's quite some distance between the lines from the first to fourth lines. And then there is zero space between the fourth line and the "we are launching..." text. Also the seconds on the timer have been pushed down a bit
I know its a bit confusing explaining all that through text, but hopefully it helps...
Matt Campbell
9,767 PointsHi Tata Cheng. I think I've sorted the seconds thing and the Twitter feed. Reduced is to two tweets because anything more then one line tweets and, as you pointed out, the bottom gets hidden. I've increased vertical space twice but it's not good so less tweets.
Would it be possible to do me a screenshot as I can't see an issue. Maybe a Firefox thing?
Tata Cheng
8,787 PointsI checked it again. Yeah some of the stuff is fixed but it still doesn't look centered. Here is the screenshot: https://www.dropbox.com/s/jsnishq73bz88gc/screen.png
Tata Cheng
8,787 PointsIt seems to look fine on everyone else's browser... it might be a firefox thing
Matt Campbell
9,767 PointsMay be in between media queries. There's a couple which have quite large ranges in pixels. I'll check though. To be honest though, it's going to be gone in 2 weeks so a little out of center isn't the end of the world, especially as it could just be a Firefox thing, if not, just very specific resolutions.
Thanks though for the screenshot. I'll spend a quick minute checking up.
Michael Sheaver
2,751 PointsHere is a screen shot of your site from Chrome on a 15" MacBook Pro with Retina Display:
Matt Campbell
9,767 PointsMichael Sheaver - Thanks dude. Looks all ok there! :)
Matt Campbell
9,767 PointsMatt Campbell
9,767 PointsThanks Derrick Mull. This is just a holding page, the pages will be much much longer after launch so white space isn't a concern right now.
The signup matter, I'll address that if I can. However, I'm not expecting a lot of mobile traffic.