Hotclutch Posted July 10, 2018 Share Posted July 10, 2018 ^^ 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 10, 2018 Author Share Posted July 10, 2018 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. 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; } Link to comment Share on other sites More sharing options...
Hotclutch Posted July 10, 2018 Share Posted July 10, 2018 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. Link to comment Share on other sites More sharing options...
Hotclutch Posted July 10, 2018 Share Posted July 10, 2018 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 } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Yes worked fine. Thanks. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 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 changing to, font-size: 16px; line-height: 1.5 we get, if only all improvments were that simple . Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 deleted Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 So had a look at the bug in bootstrap in stock Frozen. No fix for this in bootstrap 3! I changed to up to cdn 3.6.7 but it still had bug. 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? Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 So how do we improve this, 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"> Well that did the trick! Look at the SEO score now!!! 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Ok so now to try and fix these one by one. The last one is strange it fixed it self on page refresh but then re occurs! Out side my comfort zone so will have to find time to look into it further. Any feedback welcome. Link to comment Share on other sites More sharing options...
Hotclutch Posted July 11, 2018 Share Posted July 11, 2018 You're gonna get some flak for adding meta keywords tag 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Never mind I’m getting use to it here , 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. Link to comment Share on other sites More sharing options...
Hotclutch Posted July 11, 2018 Share Posted July 11, 2018 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. 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Ok looking at the second issue short_name (from bottom) 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" }] } Link to comment Share on other sites More sharing options...
Hotclutch Posted July 11, 2018 Share Posted July 11, 2018 In your template top, replace <html <?php echo HTML_PARAMS; ?>> with hardcoded: <html dir="ltr" lang="en"> Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Ok looking at second issue rel=”noopener” 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, Ok so slowly getting better. So onto the next one Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 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? Link to comment Share on other sites More sharing options...
Hotclutch Posted July 11, 2018 Share Posted July 11, 2018 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Well me too only english and it works fine. Well so far the changes have given an improvement across the board and we now have, Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Ok I think were done with Best Practice as the 3 left are all related and out side my control for now. Going to take a brake as footy on tonight and need to get ready for that ( Go England!!!!) Will have a look at others tomorow, thanks for your help Ashley Link to comment Share on other sites More sharing options...
burt Posted July 11, 2018 Share Posted July 11, 2018 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. Link to comment Share on other sites More sharing options...
Hotclutch Posted July 11, 2018 Share Posted July 11, 2018 .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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 Yeah found that 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; } Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 11, 2018 Author Share Posted July 11, 2018 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 12, 2018 Author Share Posted July 12, 2018 Ok let take a look at acceptability. Starting with Color Contrast, 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.