Page design...

[Burgerman]

http://www.wheelchairdriver.com/BM-MK3- ... rchair.htm

New page design... Took me 3 hours to change all the colours, fonts, and to reformat and re write this page.

Am going to do every page... Will take me forever. But it should be clearer and easier to read and also modernised and re written and grammatically corrected (a bit!)

Unless people object to pink!

[Anderida]

Lovely! But I didn't expect pink from you BM!

[Burgerman]

No... I still am not sure. It may takje me a few days before I get committed and to all 150 pages... LOTS of work.

[woodygb]

Can you replace the download link with this file please.

motorbm.zip

(221.98 KiB) Downloaded 350 times

[Martin O Refurbisher]

Woody,
that really is impressive! Now I'll have to learn to use it!

Best,

Martin

[Martin O Refurbisher]

BM
I have clients who love pink - if it does something for you, it certainly stands out!

Best,

Martin

[woodygb]

Thank you Martin.
It needs however to be taken as a rough guide ONLY and it may possibly have faults!

[ex-Gooserider]

Your choice obviously, but I am not fond of the pink - it is a bit of an eyeball burner, especially in contrast to the black. The green was easier on the eyes or so it seemed to me...

If a general comment is appropriate, I see a few other things that may be just the way my browser (Firefox) does stuff...

1. The pictures and the text sometimes overlap, with the result that the text is hard to read, but this doesn't happen with every picture. (I can work around by "selecting" the text with the mouse, this causes it to change to a contrasting set of colors) On the sample page, I see it on the first picture only - looks like a problem when trying to wrap the text between the picture and the Google ads.

2. On my laptop, the text is in a column that is much narrower than the screen, with just a gray band on each side of the black - it would be nicer for me if the text area filled more of the screen...

3. The header text is fine, but the article body text is a bit small, it's legible, but it would be easier if the body text was about the same size as the advertising text... (as a minor note, this is one of the few sites where I turn OFF my Adblock Plus plugin, and I've even clicked on a few of the adds!)

[Burgerman]

It all works beutifully in microsofts IE 5,6,7,8,9 as it should. And the text in the body is the same size as the ad text.

And of course thats about 85 percent of readers.

So now I have to install that clunky old firefox again that doesent degrade errors or do layout tables etc properly to try and fix it!

Thanks for the feedback.

[Burgerman]

Interestingly after installing 3 new browsers the page looks perfect and EXACTLY the same in IE as it does in Firefox. All recent up to date versions... And the same font and size used in all body text and ads...

Tried this on my GFs computer (vista) My old XP laptop, and also on my 2 Windows 7 64 bit machines. And on an android phone...

I have no idea why it doesent work on yours. Unless its substituting a font because your operating system is a bit backward and doesent have the one used or something...

[Burgerman]

Internet Explorer, loads and resises faster and no flicker...

[Burgerman]

Firefox, flickers and doesent display all web pages correctly and wont let me do my banking etc...

But this page looks identical, apart from the white outline???

[Anderida]

Runs fine on my Firefox. Wouldn't go back to IE if you paid me (well, ok, depends how much )

[Burgerman]

If you do as many web pages as I do you would. It screws up on all kinds of things. Usually errors, but IE doesent. It degrades errors and bad code way more inteligently. Pages look how they were intended. Firefox does oddball things. I have yet to find anything it does better?

20 percent of my traffic uses it, but its stopped climbing... Internet explorer is still the lions share.

But as you can see trying to make pages that work in all these browsers below (and this is HALF the page!) isnt possible. And running the same firefox browser on non microsoft operating systems with oddball fonts installed like Linux also screws it up...

[ex-Gooserider]

Well just checked, I'm running FF 3.6.18 for Ubuntu, which is supposedly the latest version...

Also if you look into the actual W3C standards, which are supposed to be the definitive spec on how the web is supposed to work, and how pages are SUPPOSED to work, you will find that IE is actually LESS compliant with the standards than FF, requiring that pages be coded "wrong" in order for IE to deal with them...

At any rate, this is what I get when I look at the page w/ my machine -

snapshot1.png (207.56 KiB) Viewed 8426 times

The picture is a lot blurrier than what I see, as I had to cut the resolution and resize considerably to get it below the 256K file size limit on attachments...

Note how the text overlaps the picture, and the font is a bit smaller than the advertising font...

Oh, and as a side note, you may see some added traffic over the next few days - the local SCI group had a picnic today in at Spaulding Rehab in Boston (where I did my rehab about a year ago... I chatted with a lot of folks and mentioned the site quite a bit, several folks seemed quite interested... The picnic was a lot of fun, lots of people, and the weather could hardly have been better... As a new experience I got to try a couple of different hand-cycles, and ended up going on a group ride of several miles on the bike paths besides the Charles River.... Lots of fun, but my shoulders are letting me know that they aren't used to this sort of thing...

ex-Gooserider

[Burgerman]

>> IE is actually LESS compliant with the standards than FF, requiring that pages be coded "wrong" in order for IE to deal with them...

Less compliant, and uses and can use stuff that isnt compliant...
But it handles errors much better. And most pages have them. I wouldnt know how to make pages that were compliant to save my life...

The reason you are getting the problems is that you have some font issues. Most websites use Ariel, Verdana, or Times New Roman.

My new page uses Verdana. The old ones Ariel. Verdana is the most commonly used font on the web. You screenshot clearly shows that your browser/operating system has for reasons I do not know, substituted another more "olde worlde looking" font possibly times new roman. Its much "smaller".

This changes all the line lengths, break points, etc so nothing fits into the tables properly any lomger.

So you either dont have the required verdana font on your system or you have changed some setting to make it ignore the font I chose for the page which screws it up...

Or my page has an error somewhere that your browser doesent handle well...

Also tested it now also on various other versions, and on a mac (awful things) and 5 different browsers. All works and looks perfectl. So its something with your operating system or browser or settings.

[Step]

K, this is up my ally

BM, maybe it's a good idea to, in stead of changing every single page, invest the time in setting up a stylesheet for your pages?
That way, you can change how titles or text or whatever look, for your entire site (fonts, sizes, colours, ...) by just changing a few values in the stylesheet.

It's pretty easy to do.
Way easier then putting all the size, color, font, ... tags everywhere in your html pages.
Allows you to concentrate on the content and keeps the html pages small & tidy.

You add a line like this: <link rel="stylesheet" href="mystyle.css">
To the head section of each page and a 'mystyly.css' file with the style setup.

I know it's not your top priority. have a quick google for 'css ' or 'cascading Style Sheets' if you feel like it.
I'd be happy to help if you're interested.

Step.

[TwoTeasChris]

Formatting is fine in Chrome. (You can sleep easy. )

[Burgerman]

So your the one using chrome!

[Burgerman]

Step, web design isnt my thing. Style sheets are a bit beyond me... But do they work on all the dozens of different mobile devices?

And in the case of the user not having the font I choose, like on those linux / god knows what browser, wouldnt the browser still use something different?

[Step]

Well... most websites 'work' on mobile devices but have a hard time loading if the user doesn't have a 3G plan. WAP, the old way of using internet on a mobile phone is very limited.
That's why many sites have a mobile version, prefixed with an 'm.' or using the '.mobi' domain name (http://en.wikipedia.org/wiki/.mobi), which is a very limited page that looks good on mobiles.
A stylesheet won't fix that.
Next problem is page size. Your pages are quite busy, which is normal for the amount of info you're sharing but very hard to read on mobile phones. decent size tablets are ok, I read your site on my iPad.

As far as browsers go, you can 'detect' what browser is reading the page and set the best font for it in the stylesheet.
You're using quite common fonts though so most browsers should do just fine.
If some exotic browser can't handle your chosen font, it will fallback on a generic one. Very unlikely.

Some formatting problems like text running over pics etc, as some of your readers mention, are probably due to versions of browsers that don't handle html tags not being closed properly very well.
Firefox & internet explorer are quite forgiving for this but not consistent in different versions/updates/fixes.

stylesheets aren't overly techy though.
If you want, you can have a look at this page: http://users.skynet.be/lifelessordinary/
It's an old website I setup and I just noticed the stylesheet is gone! (dont laugh)
If you click right on any page though and choose 'view source', you can see that the actual html page is quite simple and clean, almost readable, compared to when you view the source of yours.
That's because all formatting stuff is in the stylesheet. Adding a new page only requires me to copy the top coding and add text & pics below.
I'll put the stylesheet back tomorrow and you'll see the difference, without me touching 1 single html page.
Just to prove I can make it work , here's another site I designed which would look like the above if it had no stylesheet. It's in Dutch but you can click around to get the idea. http://www.wildschaap.be/wildschaap.html

S.

[Step]

Oh and I'm using Chrome as wel
Fastest browser on the net... that should intrest you too

[Burgerman]

I tried it at 4 different versions. It renders loads of sites, lets say, "in an interesting" way... And some not at all...

I tried them all, and always went back to the one everybody loves to hate. Because it works properly.

[Burgerman]

>>> You're using quite common fonts though so most browsers should do just fine.
If some exotic browser can't handle your chosen font, it will fallback on a generic one. Very unlikely.

Tell that to our Linux user!

I will look at style sheets. But its time!!!

[Burgerman]

http://users.skynet.be/lifelessordinary/

Do you have any idea how that looks on a 30 inch monitor with 2560 x 1600 resolution? !

[Step]

Hm, the same as it'd look if you projected it on a wall?
It was setup in 2004 though and not maintained since and with smaller monitors in mind.

Now, that's the tricky part of designing webpages. I work on a 21 inch monitor myself and what looks ok there, looks like a mess on smaller monitors.
We design with the average monitor in mind and unfortunately, that's still the 15-17 inch range.
That's why the sheep website (it's for a theatre company) uses the mid section and leaves the sides unused, like you do.

I saw you use pixels to define height, width etc and that could be part of the problem as well.
One thing you could do is make the pics a relative size, a % of the available width so they won't overlap with text.

[Burgerman]

One thing you could do is make the pics a relative size

Then they interpolate and are all fuzzy!

[ex-Gooserider]

I did some digging, and found that I didn't seem to have Arial or Verdana installed according to the KDE font manager, and Firefox was set to use very generic font names like "monospace, serif, and sanserif"... I went into the package manager, and downloaded a bunch of stuff, and now the font manager shows both Arial and Verdana. Both are listing all four variants (Regular, Bold, Italic and Bold Italic)

I haven't restarted X yet, but I changed my settings in FF to use Verdana for sans serif fonts and Times New Roman for serif fonts. I also restarted FF to ensure the changes took effect.

snapshot2.jpeg (37.82 KiB) Viewed 7351 times

This is the font selection screen for FF as I'm currently running it, also note that I have the box checked to allow the website to use its specified fonts rather than my choices (I've had this checked all along) so my choices shouldn't even matter... It does look like I'm getting a default override at least in part, since I specify the default as a serif font, but the page is showing in a sans-serif font of some type. However the result is the same...

Incidentally, I'm not an expert on reading HTML by any means, but it looks to me like BM is mixing Arial and Verdana fonts - note the following excerpt from the page source (non relevant lines deleted to save space)

Code: Select all

</STYLE>
</head>
<body style="color: #C0C0C0; text-align:center; font-family:Verdana; font-size:10px" topmargin="30" link="#FFFFFF" vlink="#D3D3D3" alink="#F54997" bgcolor="#1D1D1D" background="images-tiles/backdrop.jpg">
<td height="25" style="border-color:#666666; font-family: Arial" colspan="2">
<font face="Arial">                  
<td bordercolor="#666666"><font face="Arial">               
<span style="font-family: Verdana; color: #FFFFFF; font-style:italic">
<font size="7">W</font><font size="6">heelchair</font><font size="7">D</font><font size="6">river.com</font></span></b></td>
<font face="Arial">                           
<b><font color="#FFFFFF" size="2" face="Verdana">
<b><font color="#F54997" face="Verdana" size="2">Questions, want to share?</font><font size="2" face="Verdana"><br>
&nbsp;
</font></b><font size="2" face="Verdana">
<a title="Powerchair &amp; Mobility Vehicles Message Board -  (New Window) " target="_blank" href="http://www.wheelchairdriver.com/board/">Message
board</a></font></td>
<td style="border-color:#000000; font-family: Arial" width="734">                              
<p align="left"><font size="1" face="Verdana">
</font></td>   
<td style="border-color:#000000; font-family: Arial" width="126"><p align="center"></p>
<font size="2" face="Verdana">
</a></font></td></tr></table>
<p><b><font face="Verdana" color="#F54997" size="2">MENUS:</font></b></p>
<p><font face="Verdana" size="2">
<a title="Home Page - WheelchairDrive.comr" href="http://www.wheelchairdriver.com/">Home</a></font></p>
<p><font face="Verdana" size="2"><b><font color="#F54997">POWER WHEELCHAIR:</font><br>
<a title="Everything you ever needed to know about Power Wheelchairs" href="powerchair-stuff.htm">Everything
powerchair </a><br>
<a title="Everything you ever needed to know about Power Wheelchairs" href="powerchair-stuff.htm">HERE</a></font></p>
<p><font face="Verdana" size="2"><b><font color="#F54997">MOBILITY VEHICLES:</font><br>
<a title="Menu - Accessible Cars and Vans ONLY!" href="accessible-vehicles.htm">
Wheelchair accessible vehicles HERE</a></font></p>
<p><font face="Verdana" size="2"><b><font color="#F54997">EVERYTHING
ELSE:</font><br></b>
<a title="Batteries, charging, inverters, what goes wrong, life! Everything Else!" href="everything-else.htm">Everything
else HERE</a></font></p>
<font face="Arial">                                          
</font>
<p><font size="2" color="#F54997"><b>THIS </b></font><b>
<font size="2" color="#F54997">BM3 POWERCHAIR<br>
PAGES:</font></b></p>
<p><font size="2"><a href="BM-MK3-lithium-fast-powerchair.htm">BM3
powerchair</a><br>


Any suggestions on what I may be setting incorrectly?

ex-Gooserider

[ex-Gooserider]

Oh, and as a side note, I just tried looking at the page in Konqeror, and it seems to display better there, although it does block the Google ads.

ex-Gooserider

[Burgerman]

Try internet explorer and version. Default settings. It just works... And comes with windows 7 which also just works!

On the other hand firefof just works here too. And so did all the other browsers I tested it on. Although some of them screw up my bank, and even the PHP Forums etc... Firefox (other than slow flickery redraw on resize windows) also works well in most places.