View Full Version : Screen resolution advice?

08-27-2012, 05:12 PM

I'm currently completing a website for a local enterprise charity. I have the code ready to go, except it doesn't work on screen resolutions below 1280x600... does anyone think it would be a mistake to leave it like that? How many people use a screen resolution of 1024 or 800 these days? I think the charity iself has old systems so I'm not sure it will even work for them, but I can't find a way to make the website work short of a full redesign! Help!

The test site can be viewed here: www.youthenterprise.co.uk/newhullready/coded

The nav bar is the issue, it covers the text on smaller screen resolutions.

Any opinions/advice will be greatly appreciated


08-27-2012, 05:19 PM
People use small resolutions all the time. Anyone on a mobile client will of course have a screen smaller than 1280px, and on a laptop/desktop keep in mind it is not *screen* resolution that you have, it's *browser window* resolution. For example, even though I have a 1920px wide screen, I often have two browsers open next to each other. So each has around 950px.

Also on your code, I notice your included navigation file is a complete html document, with doctype, head, etc. It should not be. It should just be the portion of the html that you want to be included in the main file (i.e. probably your <div id="nav"> stuff).


08-27-2012, 05:33 PM
Hi Nic,

First off, nice design choices. I really dig the color scheme.

Secondly, when I design sites I usually try to ensure that they run well on as little as 1024 x 768 resolution (assuming I don't care about mobile functionality).

One thing you might look into is if the client you're designing for has any data to show what screen resolution users are using when viewing your site. Some web hosting companies will store that information for you to guide you in your design choices. It can help justify your decision (if the data supports it) in the event you need to back up your design choice.

I don't think you'd need a full re-design to make your site work on smaller resolution screens. Your problem is the left navigation, right? It seems to me that you have a lot of "dead space" in those links. While it's great for contrast's sake, you're wasting a lot of browser space.

I'd decrease the width of your nav.gif and active-nav.gif to the same size as your nav div (280px) and take your font size down from 24px to something more appropriate. Don't be afraid to make the text in the Nav smaller. Bigger is easier to read, but smaller font might be necessary to get the job done (and you can still do it without sacrificing readability).

Just my two cents. Hope it helps. Keep up the great work!

08-27-2012, 06:17 PM
Thank you for your kind words :)

I'll have a go at making the text and image smaller. Hopefully that won't take too long :D

08-28-2012, 08:19 PM
No worries! Please let me know how it goes or if you need any additional help.

09-04-2012, 03:43 PM
No worries! Please let me know how it goes or if you need any additional help.

Uh... yeah... Not sure what I've done, but the nav doesn't seem to work in IE7 at all now! It's visible, but isn't working as links, no rollover, not even able just to click and take to the link, yet in the developer tools it shows the a href link, so it is reading the nav include... Been trying to fix it for days, no luck at all! Any chance you could take a quick look?


09-04-2012, 10:42 PM
Hey Nicola,

A couple of things I see about your code...

at line 61 you have a whole new <head>, <body>, etc. Go ahead and remove that fluff. It looks like you were referencing another sytle sheet. You can move that line to the top of your page with your other style sheet references.

You also have a stray </body> tag.

In short, your code should look more like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hull Ready - the future is ours...</title>

<link href="style/style.css" rel="stylesheet" type="text/css">
<!--[if IE 7.0]>
<link rel="stylesheet" href="style/ie7.css" type="text/css" />
<link rel="stylesheet" href="../style/style.css" type="text/css"/>



<div id="header">
<div class="logo"></div>
<div class="tabs">
<li><a href="students.php" class="tab_student"></a></li>
<li><a href="teachers.php" class="tab_teacher"></a></li>
<li><a href="employers.php" class="tab_employer"></a></li>

</div><!--tabs close-->
</div><!--header close-->
<div class="clear"></div>
<div id="wrapper">
<div class="content">
<h1>Welcome to Hull Ready </h1>
<h2>This internationally acknowledged education programme is transforming the aspirations of young people in Hull thanks to Rotherham Ready, Young People's Enterprise Forum, Hull City Council and Yorkshire Forward.

By embedding enterprise skills into the primary curriculum, pupils, teachers and business professionals have come together to form ground-breaking partnerships.
Children as young as four have been introduced to the concepts behind running a business, primary schools in the City are striving to achieve the 'Excellence in Enterprise Education Award' and Hull's future economy is set to thrive.

On 8th July 2010 we celebrated the achievements of the schools and children involved in the 'Make 5 Blossom' scheme, a twist to the day saw these enterprising children set the adults a task of their own! Claire Young, runner-up in the popular TV series 'The Apprentice' spoke at the event, making this celebration day a great experience for all in attendance.

Please note that a number of the downloadable documents on this website are PDF format, you may require Adobe Reader to view these. </h2>
</div><!--wrapper close-->
<div id="nav">
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded" title="Home">Home</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/about.php" title="About">About</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/news.php" title="News">News</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/resources.php" title="Resources">Resources</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/newsletters.php" title="Newsletters">Newsletters</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/5blossom.php" title="Make 5 Blossom">Make 5 Blossom</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/big13.php" title="The Big 13">The Big 13</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/warwick.php" title="The Warwick Award">The Warwick Award</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/young.php" title="Young Entrepreneurs">Young Entrepreneurs</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/game.php" title="Interactive Game">Interactive game</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/links.php" title="Links">Links</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/partners.php" title="Partners">Partners</a></li>
<li><a href="http://www.youthenterprise.co.uk/newhullready/coded/contact.php" title="Contact us">Contact us</a></li>
</div><!--nav close-->
<div class="clear"></div>

<div class="clear"></div>

<div id="footer">
<div class="logos"></div>


That should fix you, but let me know if you have any other problems.

Also, might I recommend using the W3C HTML/CSS validator? It's a nifty tool for helping you find where you might have errors in you code. http://validator.w3.org/.

09-04-2012, 11:22 PM
Thanks for your response, that code from the bottom is from an include - which are in another folder on the site, will it still read that stylesheet if I take out all that code?

09-05-2012, 12:08 AM
Yes, it should still display that code without a problem.

09-24-2012, 09:41 PM
Thanks for all your help. I've ran this page through the validator and it's coming up clean but the nav is still not working and for some reason the jquery download I'm using (which claims it is ie7 compatible) isn't loading the images either :( I've been working on it for a week, small tweaks to the code and I'm coming up empty.

This is the url for the completely broken in ie7 page: http://www.youthenterprise.co.uk/newhullready/coded/gallery.php

Hopefully you'll have time to have a quick look for me :)