WelcomeWelcome | FAQFAQ | DownloadsDownloads | WikiWiki

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

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Enhancing Readability of Webpages
« on: July 30, 2018, 08:28:06 AM »

Hi Curaga,

While browsing the internet for website designs, over the weekend, I noticed that quite a few sites, were using a highly fine tuned and readable webpages. I looked into their css file settings and discovered that, we could use those css settings too, for making our webpages look better and readable for a longer time.

I have fined tuned our tiny.css file and enclosed them herewith for your perusal and feedback.

The four files that I am enclosing herewith, are as follows :

1. Enhanced_Pages.zip contains a folder with all the Tiny Core Main Webpages and the improved css file. Just extract this zip file and browse the index.html first and then navigate to further files using its bar on the top. Ignore any __MACOSX folder, if found in the zip file.

Hope our Viewers will find this improved version, highly readable and reducing Eye/Neck Strain, due to proper alignments set now.

2. Modified_Files.zip contains the new and old versions of tiny.css file for diff comparision ( use easier visual diff editors like meld etc. ) and then merge them with the original.

Also contains concepts.html which had to be fixed for missing <p> tags at many places.

and downloads.html which had to be fixed for proper alignment, to match the rest of the pages.

3. I have also enclosed a couple of jpg files, which gives a glimpse of readable website designs, obtained from the internet. I used them for a few settings in the css file.

4. I wish that somebody in this forum joins us, in tweaking the Wiki Page's css file as well, on similar lines, which will enable users a comfortable read of the large wiki pages, for lengthy period of time.

P.S. I have tested these new pages on the Fifth Browser as well for readability.

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #1 on: July 30, 2018, 10:19:39 AM »
It does look better, though the fonts are slightly too large for my taste. Juanito, bmarkus, can you take a look as well?

There's one issue with the new css, it makes subnews.html be wider than the browser window.
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 #2 on: July 30, 2018, 10:37:46 AM »
Hi Curaga,

I chose 16px size based on a recommendation on a site for readability. But, we can easily adjust that, based on what you all agree together ( please specify pixel size of your choice after testing ). Also, subnews iframe size can be adjusted as well to fit the page width.

Regards,

Nathan SR

Offline Juanito

  • Administrator
  • Hero Member
  • *****
  • Posts: 14516
Re: Enhancing Readability of Webpages
« Reply #3 on: July 30, 2018, 01:27:11 PM »
I also think the fonts are too big

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #4 on: July 30, 2018, 05:35:03 PM »

Hi Curaga,

Now the tiny.css is further adjusted for font sizes and subnews frame size and enclosed herewith. Please substitute this file, in your unzipped folder and check again. Thanks.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #5 on: July 30, 2018, 06:05:16 PM »

Please ignore the previous message. Now, I have attached the correct and new css file.

Regards,

Nathan SR

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #6 on: July 31, 2018, 01:08:10 AM »
I don't mean the iframe, though it too should have no horizontal scrollbar unless your window is small. Open subnews.html on its own, you'll see it's still wider than the window.
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 #7 on: July 31, 2018, 08:22:18 AM »

Thanks Curaga for the clue. It resolved the problem now. Excessive padding was the issue. I am enclosing the Modified_Files_Full_Set.zip now.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #8 on: July 31, 2018, 06:07:10 PM »

Hi Curaga,

Please ignore my previous post. I have got some very good results now. The alignments are even more perfected now, for both modern browsers as well as the fifth browser, thanks to html's great flexibility.

Please extract the enclosed zip file and copy its contents to the earlier enhanced pages folder and check the index.html and the other pages. You will be surprised with the readability now.

One thing, I request you to open intro.html file in a better text editor, then search for RepoBrowser, copy the entire line and paste it under "About Us" line in both index.html and welcome.html. This will make the alignments of these pages even more perfected and will give a better view for visitors landing on these pages directly.

I am eager to get your feedback on this version.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #9 on: August 01, 2018, 01:14:58 PM »

Hi Curaga,

The Modified_Files_Full_Set_Version_II.zip file above, fixes those two issues that you had reported, viz. horizontal scrollbar being present in subnews.html and also in the index.html's newsbar. It also obtains a desirable left padding on the #content area for proper alignment. What's your feedback on this version ?

Regards,

Nathan SR

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #10 on: August 02, 2018, 12:38:34 AM »
Haven't had time to look at it yet.
The only barriers that can stop you are the ones you create yourself.

Offline bmarkus

  • Administrator
  • Hero Member
  • *****
  • Posts: 7183
    • My Community Forum
Re: Enhancing Readability of Webpages
« Reply #11 on: August 02, 2018, 01:16:43 AM »
Well, I do not have time to check it due to job load.
Béla
Ham Radio callsign: HA5DI

"Amateur Radio: The First Technology-Based Social Network."

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #12 on: August 03, 2018, 10:57:47 PM »

Hi Curaga,

Hope we can sort this out over this weekend.

Regards,

Nathan SR

Offline Nathan_SR

  • Jr. Member
  • **
  • Posts: 82
    • Quick-Save-Live
Re: Enhancing Readability of Webpages
« Reply #13 on: August 05, 2018, 11:58:10 PM »

Hi Curaga,

Could you please copy just those 3 files ( in the .zip above ) to the webserver's root folder and confirm. Myself and the forum users here can come back to you, in case of any concerns, in viewing the webpages. We have sufficient backups of these files, so that we can revert them in case of any issues.

Regards,

Nathan SR

Offline curaga

  • Administrator
  • Hero Member
  • *****
  • Posts: 10957
Re: Enhancing Readability of Webpages
« Reply #14 on: August 06, 2018, 12:57:47 AM »
No, blindly copying files is not something anybody should do. I will look at them when I have time.
The only barriers that can stop you are the ones you create yourself.