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.

Resources:

IE Hacks from Cave Monkey.

IE Hacks from Position is Everything.

CSS and IE7 from QuirksMode.

See your site as others do: www.anybrowser.com or www.browsercam.com

Screen Resolution

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.

Responsive Design

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.

Resources:

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

Help

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.

Are you struggling with ranking, attracting visitors, generating leads or getting sales?

Or are you just stuck not knowing what to do next?

Call me on: 01252 643927 or 07921 859802 or Send me an email.

Or fill in this form which will appear as if by magic

Web Statistics Web Statistics