Jump to content
Latest News: (loading..)

Recommended Posts

^^

Bootstrap 4 addresses many of these "issues". It has a default font size of 16px.

Another thing that can be done is to lossless compress images, there are plenty of free online tools available for that. I like using this one:

https://kraken.io/

If the image set of the oscommerce package were losslessly compressed that would make a difference to the above scores.

Share this post


Link to post
Share on other sites

Well its a quick fix in bootstrap 3 just add the following to user.css, all font errors gone and site more readable on mobile. Just tick them off one by one.:smile:

Oh by the way this is for stock so if you have modified your site or used a template change color /font style to match your current site.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

 

If you don’t want change all the text ( but you should) then set each section using this. It covers most of the text.

.description {
    font-size: 16px;
}

.dropdown-menu {
    font-size: 16px;
}   

.form-control {
    font-size: 16px;
}
.btn {
    font-size: 16px;
}    

.footer {
    font-size: 16px;
}

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

you can add it like this:

body {
    font-size: 16px;
    line-height: 1.5
}

.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

you only need to put the css that you want to change. And the line height of 1.5 that i have is how it is in V4. This will further increase the SEO score.

There may be other classes that are affected, but i think not many.

@JcMagpie

After you change the body tag to 16px, many other classes inherit, so no need to explicitly change input, button etc.

Edited by Hotclutch
Added info

Share this post


Link to post
Share on other sites
body {
    font-size: 16px;
    line-height: 1.5
}

.dropdown-menu { font-size: 16px }
.dropdown-menu > li > a { line-height: 1.5 }
.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

 

Share this post


Link to post
Share on other sites
9 hours ago, Hotclutch said:

This will further increase the SEO score.

Well that worked, just fixing the fonts and line made a big difference

with 14px stock frozen

image.png.b2bc695d69fc36d9107234f4c404cffa.png

 

changing to, font-size: 16px; line-height: 1.5 we get, if only all improvments were that simple :biggrin:.

image.thumb.png.620526e17b8d426425ea9a5ba88f9252.png


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

So had a look at the bug in bootstrap in stock Frozen.

image.png.32057c5675b36fe1913978e9d2d3aae3.png

No fix for this in bootstrap 3! I changed to up to cdn 3.6.7 but it still had bug.

image.thumb.png.1016ea082ffe6eb50abc96d18a333658.png

I tested 4.1.1 cdn and this fixs bug but brakes stock frozen layout.

So looks like we have to put up with this until bootstrap issue a fix. Unless someone has a fix?

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

So how do we improve this,

image.png.d86e7cdc43124965d10cfe2096e686c8.png

Now this is built into Frozen but is not automatic. It would be better to have this as the Products Title for SEO: which is auto set. The Product description should default to the meta description unless changed.

So lets see what effect it has when we use it. Will use generic descriptions from wiki.

First just doing categories. No noticeable improvement still giving same error.

Product data, Again made not change! So ok lets add manufacturers meta data. Still no change?

Ok lets do this the old way. Lets add it to template_top.php

So added this copied from old 2.2 site.

<META NAME="DESCRIPTION" CONTENT="Just Fast Food bringing you great taste in all fast foods">

<META NAME="KEYWORDS" CONTENT="burger, Tawa, chicken, Tawa chicken, Pizza, restaurant, fast food, hounslow, london, united kingdom, franchise, order, take away, food, fast food, burger, MacDonald, KFC, chicken cottage, halal, curry, curries, google, fast">

<META NAME="DISTRIBUTION" CONTENT="Global">

<META NAME="RATING" CONTENT="General">

<META NAME="LANGUAGE" CONTENT="EN">
<META NAME="AUTHOR" content="Just Fast Food">
<META NAME="PUBLISHER" content="Just Fast Food">
<META NAME="COPYRIGHT" content="Just Fast Food">
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<META NAME="REVISIT-AFTER" CONTENT="1 DAY">

:biggrin: Well that did the trick! Look at the SEO score now!!!

image.png.61ebb45cde939263eb03cbf832491207.png

Do I need it all? Probably not, must have added it to 2.2 for a reason, but don't ask was done over 15 years ago.

 

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

Ok so now to try and fix these one by one.

image.png.16d9b203c5e600de5bdf464a68376a9d.png

The last one is strange it fixed it self on page refresh but then re occurs!

image.png.5baf6532ed73156302fc2b2ea44d6d85.png

image.png.a6e0b2694570a9c1d171971a32324f62.png

Out side my comfort zone so will have to find time to look into it further. Any feedback welcome.


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

You're gonna get some flak for adding meta keywords tag :laugh:

meta robots index you never need to explicitly add, because the default behaviour of robots is to index, follow.

I am surprised the audit tool fails on the omission of a meta description tag. Google does not worry with it, Bing still highlights it as a SEO factor. In any case, there are a few good addons that add meta description if the siteowner wants them.

 

Share this post


Link to post
Share on other sites

Never mind I’m getting use to it here :biggrin:, just trying to muddle through it as best I can.

I don't mind like you did before feel free to add a corrected version of what should be used.:thumbsup:

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites
13 hours ago, JcMagpie said:

Well its a quick fix in bootstrap 3 just add the following to user.css, all font errors gone and site more readable on mobile. Just tick them off one by one.:smile:

Oh by the way this is for stock so if you have modified your site or used a template change color /font style to match your current site.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

 

If you don’t want change all the text ( but you should) then set each section using this. It covers most of the text.

.description {
    font-size: 16px;
}

.dropdown-menu {
    font-size: 16px;
}   

.form-control {
    font-size: 16px;
}
.btn {
    font-size: 16px;
}    

.footer {
    font-size: 16px;
}

Consolidating your changes and mine we can put in user.css

body {
    font-size: 16px;
    line-height: 1.5
}

.dropdown-menu { font-size: 16px }
.form-control { font-size: 16px; line-height: 1.5 }
.btn { font-size: 16px; line-height: 1.5 }
.dropdown-menu > li > a { line-height: 1.5 }
.list-group-item-text { line-height: inherit }
.thumbnail { line-height: inherit }

.description and .footer, I don't think they are bootstrap, or maybe they are custom.css, so i have not added in those.

Share this post


Link to post
Share on other sites

Ok looking at the second issue short_name (from bottom)

image.png.843e1cd9981921eab395c72803c8dbef.png

Simply by adding a manifest.json file and adding

<link rel="manifest" href="manifest.json" />

To <head> in template_top.php got rid of that and improved our best practice rating.

I just used a stock template for the file.

{

"name": "Just Fast Food",

"short_name": "JFF",

"description": "Just Fast Food bringing you great taste in all fast foods",

"start_url": "https://www.justfastfood.com",

"background_color": "#000000",

"theme_color": "#0f4a73",

"icons": [{

"src": "icon-256.png",

"sizes": "256x256",

"type": "image/png"

}]

}

image.png.09230edd6422a940a7e4b017e349b0af.png


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

Ok looking at second issue rel=”noopener”

image.png.b64389e5509d935102c174bd75775ecf.png

This is caused by /public_html/includes/languages/english/modules/content/footer_suffix/cm_footer_extra_copyright.php

by this part of code.

Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a>

As this is no longer a requirement of OsC it can simply be removed. Or if you want to fix it _blank needs to be fixed. See below

https://developers.google.com/web/tools/lighthouse/audits/noopener

Fixed code is,

Powered by <a href="http://www.oscommerce.com" target="_blank" rel="noopener">osCommerce</a>

That now gives us,

image.png.7db69293b205348fc317afaa82a1ce19.png

Ok so slowly getting better. So onto the next one :smile:

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites
9 minutes ago, Hotclutch said:

In your template top, replace 


<html <?php echo HTML_PARAMS; ?>>

with hardcoded:


<html dir="ltr" lang="en">

 

But what if I change language in shop? once hard coded will this not cause problems or is that not relavent?


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

It might cause problems yes, but does the code work at all?

I only have one language, which is English, so won't cause problems for me.

Edited by Hotclutch
Added info

Share this post


Link to post
Share on other sites

Ok I think were done with Best Practice as the 3 left are all related and out side my control for now.

image.png.88d1ee9984e6c2304c33e3348d7213eb.png

 

Going to take a brake as footy on tonight and need to get ready for that ( Go England!!!!):biggrin:

Will have a look at others tomorow, thanks for your help Ashley :thumbsup:

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

Great thread @JcMagpie.  Keep on going with this thread, as I am following your efforts with conclusion of putting into next round of changes in CE.

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
.btn { font-size: 16px; line-height: 1.5 }

Changing the btn class to 16px causes some alignment issue on the cm_header_search, so i recommend leaving this out, or maybe something else needs to change along with it.

 

Share this post


Link to post
Share on other sites

Yeah found that :biggrin: Gary will know why and how to fix, but for now I fixed it with user.css by adding

/* surch bar fix */

.form-control {
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}

Edited by JcMagpie

I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites
1 hour ago, burt said:

Great thread @JcMagpie.  Keep on going with this thread, as I am following your efforts with conclusion of putting into next round of changes in CE.

Yeah thanks, plan to carry on tomorow just slowly working down the list. Had to stop to get BQ ready for footy.:biggrin:


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

Ok let take a look at acceptability.

image.png.280d6694f2e54aba68495c78beb5f77e.png

Starting with Color Contrast,

image.thumb.png.9a0e24c56fd426a939fd751e13c73ff5.png

The issue here is poor contrast on button to text and background to text on cats box. All the “a” are cats.

Use this tool to check

https://dequeuniversity.com/rules/axe/2.2/color-contrast?application=lighthouse

Used this in user.css to fix

 

.btn-success {
color: #fff;
background-color: #2B642B;
border-color: #00b3db;
}

a {
color: #285C8B;
text-decoration: none;
}

 

Now we have, but this is an issue on many buttons as default contrast is poor. This is an issue with Bootstrap. This is for people with poor sight. So pick your colors carefully.

image.png.0d31a1597b9c965b8be88bf773281a2f.png

 


I'm using the cutting Edge v2.3.4.1 CE:thumbsup::smile:

Get the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×