Fixing Browser and Screen Resolution Problems
The number of operating system, browser and screen resolution combinations is quite staggering.
On the operating systems alone you have all the Windows variants, the Mac options, UNIX, Android, Linux and even WebTV. The browsers range from Internet Explorer, through Firefox, Safari, AOL, Lynx, Opera, Konqueror, smartphones, tablets and so on.
Screen resolutions begin at 320px wide all go the way to thousands of pixels wide. So, because of all these variants it is worth making sure that your site works in as many of them as possible. Not an easy job though.
Validate Your site
You first port of call should be to validate your site against the international standards approved by the WWW Consortium (www.w3c.org). This will not ensure that your site will work for everybody but it does mean that you can clear up the common problems. If you want to do your checking offline then you can use the HTML validator extension for Firefox.
Bear in mind however that not all browsers comply with the standards. Internet Explorer for example is one of the worst and you may need to do lots of tweaking to make sure the site does as it should. And if you design for IE then it probably won’t work in the others. Ho-hum.
My advice is to download as many browser variants as you can and build your site to the web standards. Test it in all the browsers before you look at it in IE. If it still works, well done. If not you will have to introduce some hacks.
IE Hacks from Cave Monkey.
IE Hacks from Position is Everything.
CSS and IE7 from QuirksMode.
There are three ways to get round the problem of screen resolution:
1. Make your content dynamic so that is adjusts to meet the browser resolution. The modern way to do this is with a responsive layout.
2. Make the site ‘full width’ to that it will always fill the screen. Which is fine if everybody has the same screen as you. But just because it looks good on your 1024 pixel wide screen doesn’t mean it will work for somebody with a 21″ monitor at 2048 pixel resolution. And reading a long line of text that stretches across the whole screen isn’t that easy (imagine trying to read a newspaper without columns).
3. Put your contents in a box that will fit most screen resolutions. You will have to make a decision as to the box width but the generally accepted minimum resolution fora PC/MAC these days is 1024px so allowing for scroll bars and browser chrome, setting a content width of 960px should be OK. Use your analytics package however to check before you make any major changes. However, if most of your visitors use a smartphone or a tablet then you need to cater for them as well.
A child of CSS3, media queries are an incredibly poweful tool that will let you rearrange your content depending on the device your visitor is using. It works a bit like this:
- You build your site with a logical structure (header, navigation, content, footer) and style it as normal.
- You then create @media section for each device width you feel is necessary.
I used 1060px (desktop) 768px (iPad), 600px (smaller tablets), 480px and 320px (smartphones) as my triggers. Because the site was built with a simple structure all I had to really do was float the various bits in different ways.
Responsive Testing Tool: mattkersley.com/responsive/
Layouts and Media Queries: http://www.onextrapixel.com
Responsive Grids: responsivegridsystem.com
Cross-browser CSS compatibility from www.quirksmode.org
W3C specification for mediatypes: www.w3.org
And if you really must use a hack: www.webdevout.net
But if it still won’t work the way you want it to then get in contact and I’ll see if I can help fix it for you.