WelcomeWelcome | FAQFAQ | DownloadsDownloads | WikiWiki

Author Topic: Enhancing Readability of Webpages  (Read 8121 times)

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #15 on: August 07, 2018, 10:43:54 PM »

Hi Curaga / Juanito ,

As you are aware, the First Impression that a Visitor gets, on landing into the Tiny Core Website, is improved, with these .css changes. Also, the first time visitors are from other operating systems and not from within tiny core itself.

Apart from the cooler background / foreground color combinations, the max-width of paragraphs is fixed now, to prevent long running lines. Also, left padding gives a decent enough alignment of the whole matter. All these changes are clearly visible, with a diff of these files, with their original counterparts. The font size has been adjusted now, based on your feedback earlier.

Hope you can spare some time this week, to complete this project, successfully too. Please revert in case of any further concerns.

P.S. My humble wish is to see that tiny core is enjoyed by all, in all its aspects. It is a great/ideal base to start with for any purpose and the learning of linux that it offers, is un-paralleled too.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #16 on: August 11, 2018, 03:35:43 AM »

Hi Curaga / Juanito ,

Eagerly awaiting your feedback on this project, this weekend. If you have decided to abandon it for some reason, then also let me know, either through a post here or with a PM to me. Thanks.

Regards,

Nathan SR

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #17 on: August 11, 2018, 07:58:59 AM »
No need to keep reminding :) Didn't have time until now.

There's some problems with it, the overrides break several situations in small windows, there's a weird rectangle on the downloads page that corresponds to nothing, and the downloads page's footer is on the right, not at the bottom. Perhaps I can just take the font and color changes without the breaking ones.
The only barriers that can stop you are the ones you create yourself.

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #18 on: August 11, 2018, 08:12:55 AM »
Ok, I've merged the font and color changes, but left out anything that broke something. Thanks!
The only barriers that can stop you are the ones you create yourself.

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #19 on: August 11, 2018, 09:00:29 AM »
That’s fine as well.  :)  Thanks Curaga. Will give you feedback, once you are through with the deployments.

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #20 on: August 11, 2018, 02:18:41 PM »

Apologize for the PM. I found out something, which may be of interest to you, in this current project of ours.

If we substitute the font color line in the tiny.css file from :

color: #555;

with

color: #000;

the contrast levels are enhanced from the AA standard to the AAA standard, according to :

https://jdlsn.com/color/?type=hex&color=000000&color2=ebedf3

Another site : http://colorsafe.co/  generates a choice of font colors, for our chosen background color, as per the inputs that I gave it ( picture enclosed ) which can help us to make our decision on the font color. We can actually copy and feed its value to our test tiny.css file, save it and refresh the webpages, to see its visual effect.

Request your feedback on this, after some tests at your end. Thanks.

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #21 on: August 12, 2018, 01:00:12 AM »
Changed.
The only barriers that can stop you are the ones you create yourself.

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #22 on: August 12, 2018, 01:23:34 AM »
Great ! Eagerly waiting to see the final product, that has developed, so far....

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #23 on: August 12, 2018, 12:19:50 PM »

Hi Curaga,

I am enclosing a further enhanced tiny.css file herewith. Readability is further enhanced with features like center divider alignment, sufficient line heights, an outer border and no more overrides or overflows. Hope to get your feedback and confirmation on the project deployment.

P.S. My side of testing is completed on both the Fifth Browser ( with VGA=791 ) as well as the Modern Browsers.

P.S. Forgot to add : apart from this tiny.css file, only concepts.html need to be copied from the earlier .zip file to the final location, after your testing.

Regards,

Nathan SR
« Last Edit: August 12, 2018, 12:38:00 PM by Nathan_SR »

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #24 on: August 17, 2018, 05:26:51 PM »

Hi Curaga,

I am enclosing a zip file, containing a couple of variations of the tiny.css file, as follows :

1. tiny_singlecolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name.

2. tiny_multicolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name. in this design, I have modified subnews.html to align it with its main page.

in both designs, concepts.html is a modified page, as earlier.

Request your feedback / closure of these changes, today. Thanks.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #25 on: August 17, 2018, 06:11:27 PM »

Hi Curaga,

Please ignore the earlier post.

I am enclosing a zip file, containing a couple of variations of the tiny.css file, as follows :

1. tiny_singlecolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name.

2. tiny_multicolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name. in this design, I have modified subnews.html to align it with its main page.

in both designs, concepts.html is a modified page, as earlier.

Request your feedback / closure of these changes, today. Thanks.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #26 on: August 18, 2018, 11:40:28 PM »

Hi Curaga,

Please ignore the earlier post.

Given the benefit of additional time, I was able to analyze a few more website designs and arrive at a couple of more professional display of our webpages.

I am enclosing a zip file, containing four variations of the tiny.css file ( along with our main webpages ) , as follows : ( Please sort this folder files, according to date_modified descending, on your file manager, to quickly get to the files )

1. tiny_multicolor_card.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name. in this design, I have modified subnews.html to align it with its main page.

2. tiny_singlecolor_card.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name.

3. tiny_multicolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name. in this design, I have modified subnews.html to align it with its main page.

4. tiny_singlecolor.css

Rename this to tiny.css to see its effect on the webpages, starting with index.html
After testing, rename it back to its original name.

in all designs, concepts.html is a modified page, as earlier.

Request your feedback / closure of these changes, today. Thanks.

Regards,

Nathan SR