Hi please can you let me know what you think of my responsive uni dating website? http://www.unicrush.com
Looks good, if the images are dynamically updated in the future and have different dimensions or aspect ratios will they scale as well?
It's an interesting attempt, but having both columns be % width is somewhat quirky, resulting in the layout feeling a bit broken. The SELECT+scripting doing lists of anchors job has no real graceful degradation and generally speaking feel 'slapped on the page any old way' -- likewise the use of absurdly undersized fixed metric (px) fonts on the content areas is a real accessibility faux pas, and generally speaking feel 'slapped on the page any old way'. The text over the images also suffers from legibility issues either from not having sufficient color contrast -- something that could be fixed by using a dark low opacity background or increasing the amount of text-shadow. (the former usually looks better). Likewise I'm seeing four different layouts in four different browsers at the same window size and default font size, and that's usually a bad sign... and for a 'responsive' layout it doesn't do all that good a job at actually compressing to handheld widths, falling apart miserably at anything less than 640px wide (one of the entire reasons to BUILD a responsive design) While it is nice to see someone attempt to use numbered headings properly, there are a number of semantic "What the?!?" in the code -- like the use of background-images for content, pointless DIV and span for nothing, paragraphs around non-paragraph elements (like an entire form?!?), absolute URI's for nothing, no matching ID's for any of your FOR attributes, no media targets on your LINK meaning you are sending your screen layout to 'all', and of course the fat bloated jquery for nothing garbage. It's by no means the worst I've seen, and for a first attempt at responsive you could have screwed up a lot more. It just needs a bit of accessibility and usability tweaks, mated to a wee bit less scripting would go a long ways to 'drive it home'.
I see your website. i see you use % (percentage) for responsive issue. but use can see there are some problem with site LOGO in small size. And left side layout is not looking good. Also "Gender" and "Select Your Uni" top of the logo and right side column title. I have to suggest you to use CSS Media Query for different window size. it will be best for see the site in every device(Laptop, PC, Mobile, Tab etc.) If you want to learn more about "CSS Media Query" Please see this link http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ I think it will help you to look your site more better.
A good attempt. Deathshadow made a lot of the main points but here are my main things you could probably take a look at/fix. No mobile design. Mobile sites will display the main site anyway, even if you did have a Media Querie'd site. This is because you need the tag: <meta name="viewport" content="width=device-width; initial-scale=1.0"/> HTML: In the head section of the site. This basically tells mobile browsers (Or any browser really) to behave and stop lying about the width of their screen. Smaller than 750px, the left sidebar starts to overlap into the space on the side separating the content and sidebar. Could be fixed with temporary fixed width before reverting to mobile design. Sidebar stays in same position when resizing. This doesn't allow space for the main content, which sometimes overflows. Add "clear:both;" in your media query to the sidebar or content area div and it should move the sidebar below the content when resizing. Lots of white space on the side of the content when resizing the window, could be fixed with some clever centering. That's probably the main display issues that I can find.
Your web site looking good and themes color you are using is very good and eyecatching. I agree with deatshadow . He hilightes some important points. You must need to make these changes . You can also use this for mobile display <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />.
NEVER disable zooming with maximum-scale=1 and user-scalable=0 -- that just pisses on accessibility. Really those values don't "help" with mobile display unless you are designing for mobile from the start. If you aren't building elastic semi-fluid and responsive those values can in fact do more harm than good! While at the same time if you're designing with all three you need to tell mobile browsers not to lie about device-width, device-height and not to start out with some different initial-scale.