Tiny Core Linux

General TC => Programming & Scripting - Unofficial => Topic started by: Nathan_SR on July 30, 2018, 08:28:06 AM

Title: Enhancing Readability of Webpages
Post by: Nathan_SR 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.
Title: Re: Enhancing Readability of Webpages
Post by: curaga 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.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Juanito on July 30, 2018, 01:27:11 PM
I also think the fonts are too big
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: curaga 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.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: curaga on August 02, 2018, 12:38:34 AM
Haven't had time to look at it yet.
Title: Re: Enhancing Readability of Webpages
Post by: bmarkus on August 02, 2018, 01:16:43 AM
Well, I do not have time to check it due to job load.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR on August 03, 2018, 10:57:47 PM

Hi Curaga,

Hope we can sort this out over this weekend.

Regards,

Nathan SR
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: curaga 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.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: curaga 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.
Title: Re: Enhancing Readability of Webpages
Post by: curaga 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!
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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.
Title: Re: Enhancing Readability of Webpages
Post by: curaga on August 12, 2018, 01:00:12 AM
Changed.
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR on August 12, 2018, 01:23:34 AM
Great ! Eagerly waiting to see the final product, that has developed, so far....
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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
Title: Re: Enhancing Readability of Webpages
Post by: Nathan_SR 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