You are invited to Log in or Register a free Frihost Account!

Website design for multiple screen resolutions

I learned something yesterday. Possibly this is elementary for most of you, but it gave me a great thrill when it succeeded in the end. I am not a professional Web designer. It is just a hobby for me. So for lack of anybody else with the know-how I designed a Website for our Department at work in 2002 using FrontPage 2000 (I now use FrontPage 2003). At that time all of us had 14 or 15 inch monitors and it looked quite OK. Then a year ago when we were given new hardware those who qualified for new hardware were given 19 inch HP LCD monitors which was like jumping from the archaic to modern. I then received complaints from people who still had the smaller resolution screens that they could not see the shortcuts in the title bar of the Website, i.e. like the ones of Frihost above. Some of the shortcuts folded in or disappeared on their screens.

I then had to puzzle about this, and after working it out over a month or so came up with a solution. Since I am a very basic designer I use tables, so I adjusted all of the tables to 100% so that the Website could expand in proportion to the resolution settings. At that time I thought I had to accept that the Website that had been designed will never look good again. For example I had a collage of photos in one row, and they were now spread with lots of colour space in between. Some of the people who had not been upgraded and had 15 inch LCD screens, or were using the Website on 15 inch laptop screens were OK, but quite a growing number of people with 19 inch LCD screens had this stretched look of the Website. When my boss got a 21 inch HP LCD monitor it really looked awful to me. He thought he could live with it, but it really irritated me.

I could do nothing at the time as there was no time but when I started to tinker on my new Website (a tiny one for Frihost) this weekend, thought I would make it my mission to get to the bottom of this challenge. It is then that I learned that it was as simple as the resolution at which the screen has been set, and that one had two choices. You could either set your table at 100% to expand to the size of the resolution setting, or set the table properties to a specific pixel width for the smallest resolution screen i.e.:

1. Click anywhere in the Table (I use FrontPage software)
2. Right click and select Table Properties
3. Select "In Pixels" in the Table Properties (instead of "In Percentage")
4. Tick "Specify Width" and enter specific number of pixels
5. 772 pixels worked for me for a 800 by 600 pixel minimum resolution screen

To check how many pixels are needed - if you have a larger resolution screen, reset
the resolution of your monitor to the minimum that you would like to aim at. I set my
19 inch LCD to 800X600 (some may need a different minimum at the next level).
This way I could work out that 772 pixels would work for all the LCDs and laptops
in our Department at work. Eureka!!!!

6. I found I had a table within a table so I had to set the outer table also at 772 pixels

So instead of a stretched Website, I now have one that has been designed for the minimum resolution screen of 800 by 600 pixels - equal to a 15 inch LCD screen. The Website now looks much better and much more professional as it is nice and tight again, everything in the right proportion rather than the stretched 100% percentage look of before.

Can imagine some of the experts must be laughing as possibly DreamWeaver and the more sophiticated software cater for this, but at my hobby level am side-kick happy about this latest discovery! Smile
From the sounds of it, you've been using a WYSIWYG editor. Whilst these have their good points for those who don't care about their code, for others it is just a pain. Without learning HTML/CSS properly yourself, you don't know about basic things such as what you have just learnt.

Well done though, and I wish luck on any further improvements you make and tricks you learn.
Thanks Matthiaus. I also learned something else, which is so very basic I want to kick myself for not grasping this earlier. I wondered about the fuzzy appearance of my Boss's new 21-inch monitor. And then another flash bulb went off in my head last night. When we are supplied with new hardware, the IT Dept goes to quite a lot of trouble with its specifications for the total package. They never replace one piece of hardware, you get a complete set of equipment. My boss bought a larger monitor out of the Department budget than the one that had been specificied for the graphics card that came with his original hardware. So here I learned that if I were to upgrade my monitor (his previous one was 17 inches), then I need to check out the graphics card and perhaps a number of other hardware items as well. I note that the current settings of my 19 inch LCD monitor is at its maximum strength. So if I were to get a 21 inch LCD on the present graphics card it still may look OK, but anything further the graphics card, and for that matter the hardware will all need to be upgraded. So looks as though there is as much perspective and balance in proportion that has to maintained in how ALL of the hardware work with one another, as in the design elements of a Website. Smile
I have problems with page resolutions. Could somebody help me to write a Javascript to choose the right screen resolution of user browser?
Is this the kind of thing you are looking for?
Related topics
Brett Tabke's website tutorial
Website design and promotion advic
Will U give an Advice
Website design question
Top Website Design Programs
I need a professional website design
Site redesign
attention flash/website design experts! paying 200 frih$!
50 frih-make site compatible w/ diffrent screen resolutions
If you know website design, check this....
Website Design
PLAVEB - Website Design & Web Development Company | Check your Website Design compatibility
Freelance Website Design
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.