Tips for quality website design


#1

A couple of pictures I collected from the net - if it helps :slight_smile:

Please - click on each picture, then select DOWNLOAD and view it on some local image viewer


























#2



























if someone asks what is better / more correct
to print a copyright year 2000 - 2019 in website or just 2019

(P.S. I will also book this post and space for further update content)


#9

None of the images, links… are showing. By the way, our web site is impressive. I’m stunned how fast the pages load with all the graphics.


#10

Hi buddy :slight_smile:

maybe admin does something about my mail so I’ll wait
if that is not the case - I will edit the post to be visible again. Thanks for the information :wink:
the problem is cache/thumbn. and hereWasAlinkFor-googleapis-ButNowIsChangedGlobally

I’m glad your site is good and you are satisfied
btw. view my website how fast is with tone of things it contains (link in BIO)


#13

The upload storage was moved yesterday but apparently some links were not properly updated. I’ve copied the files back to the old storage, but now it seems the tumbnails have been messed up. The posts are currently being rebuilt which I hope will solve the issue.


#14

thank you - SOLVED :wink:


#15

OxyDac, I’m sorry, I made a typo “our web site” was supposed to be “your web site is impressive”. I looked up your website a couple days ago. Was surprised to see you’re using .cf domain on such a tailored site. The million dollar question is how are your complex graphically packed pages being painted so fast? It appears your whole website is cached, ready for immediate display.

As for my website, added for Mobile:
'<'meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

I’m Floating a 410x72 png inside top banner, rather than positioning (3) elements simultaneously using:
@media all and (max-width: 616px) { …

Looking for better caching configuration, mobile ready analysis reported my website has a weight of 1260kb. That doesn’t seem excessive, does it?

Yes, I’m looking for ‘Tips for quality website design’.


#16

warning to other readers !
what I’m going to say here and especially the cloudflare stuff is just about my website
wrong use of page rules, etc. especially in dynamic pages will make you trouble

Hi @swagler

my site uses something called grid system
the thing is complex but start here


https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://www.w3schools.com/css/css_rwd_grid.asp

and then if it is a mobile device i just display certain elements in a particular grids (CSS and %for scaling)

my site is 10+ years old
much of the knowledge I gathered during those years and of course website was polished for years
so you do not have to wonder or compare your website with it.

i made page rules in cloudflare and cache ALL (even html)





Capture

also all my website code passes without error in the validator https://validator.w3.org/
CSS is v3 standard and also passes validator http://jigsaw.w3.org/css-validator/

I also use a rocket loader (cloudflare)

for images - nothing special except that they are optimized with the service https://tinypng.com/

most of the JS is inside one file except in the case of specific things when I could not do it (quiz and animated woman)

all CSS and JS is compressed
JS http://compressorrater.thruhere.net/
JS http://htmlcompressor.com/compressor/
CSS (adv. css3 rules) https://csscompressor.com/

all Fonts and icons is woff2 standard and optimized
I do not use huge packs like Font Awesome because there is no purpose to load 300+ icons and I use only 10 in my website
so i use this service and pick just what I need https://icomoon.io/app/#/select (add icons at bottom)

favicon https://realfavicongenerator.net/

QR https://www.unitag.io/qrcode

my site uses jquery and lots of visuals rely on it also all JS plugins
https://jquery.com/

I also use jqueryUI but just tabs (custom build - small size)
https://jqueryui.com/download/

USEFUL:


https://codebeautify.org/



no, it’s OK :slight_smile:
btw. you can make a logo with some online service

TEST:
you use Firefox like me so we need use this test (from chrome) https://www.webpagetest.org/lighthouse
test 2 https://developers.google.com/speed/pagespeed/insights/
test 3 https://varvy.com/

LOL https://www.crazyegg.com/blog/terrible-websites-you-should-copy/


#18

Wow, thanks for great info. I reduced body content from 960px to 800px and created 800x450 downsized screenshots to initial load, using ‘View Image’ to reference full size images. That cut weight to 649kb.

Your Cloudflare guide will probably solely do the trick, for my website is totally static.

I read a post you participated in regarding phpbb. Is it WordPress plugin only?
Is offered as low level HTML code?
I’m not ready to add comments, but interested. What’s your opinion of phpbb?


#19

phpbb is forum (engine)
you can always add a subdomain like forum.yourdomain.com (like infinityfree and this forum)
and then just link that forum in menu inside of your mainDomain)
so you have separated the active things from the static ones

Whatever you do, you should first ask yourself:

"It is worth investing my time in it
and which result will be in the final ?? "

I think that no one will say anything intelligently in that comments inside of your website
or ppl will ask you there “why does not it work for me?”
which will further refute people and there are spam bots and you also need recaptcha

in the end you will be the one :innocent: who comments on your website
(falsely presenting as someone else) and praises your programs so that people have the feeling that it is vivid on your site but actually you have less than 10 visits per day

trust me - you do not need the comments part

maybe you need FAQ section or CONTACT (mail)
so if some user have a problem or suggestion to be able to contact you

@swagler I’m constantly telling you stuff which needs to be fixed on your website
and you can get the wrong impression that all you do is bad or wrong
I hope it is not so but if you need motivations, trust me that I’m pleasantly surprised by the speed at which you master all that and how fast you learn !


#20

Yeah, I don’t think I need comments, I’ve added contact info. It’s funny, I’ve posted my apps on several programming forums ect… over the years, also distributed via Google Drive. I disabled public downloads of Google Drive after creating website, and get 8+ requests a week for permission to download, I then write back informing of new website. But yeah, most just download without bothering to comment.

I added Cloudflare rule, huge improvement, paints immediately.

Buddy, I only appreciate your advise. I’m a mechanical, later an Architectural designer since 1977, worked on CAD systems since 1986, been writing Windows software since 2004. So to me, this is just another related discipline.


#21

Rocket Loader at Cloudflare is a pay service right? If not, how do I configure it?


#22

No ,but if you don’t have javascript than it is useless


#23

I’ll keep Rocket Loader in mind, lol don’t have any JavaScript yet.
i see you use .cf domain. You see no need to get a .com or .net?

btw, I see you play guitar? So do I.


#24

A very long time ago…A few people asked me: “Why don’t you have a real website?

I’m amazed, ask them “what you mean I don’t have?!”

-Well, you don’t have that .com at the end

-Omg… So if I don’t have it my website isn’t real?

Then a few years passed…So the same question came again, but now for other side of a address
-Why don’t you start the address with www as a all real sites???

omg again…

Here are a few citations from ancient discussions:

I think most people are used to having www. in front of a url. If they even notice it, I think it will confuse them not having that.

I’ve seen some sites that redirect to m.example.com if you’re accessing them from a phone. Do you think people are getting confused by that?

You’re describing a world where everybody expected a website to end in .com, and if not that, then maybe a handful of others. That world is changing; what will people’s expectations be in the future?

The thing is, www prefix was never a requirement. It came about as a convention to very specifically indicate that www.example.com = web server, and ftp.example.com = ftp server, etc.
There’s no real reason to do it, other than convention from the early days. The CNAME restriction is really the only technical gotcha, and this is slowly becoming a non-issue with DNS services like Route 53 that now allow CNAME on roots.

I just find it odd that www is still considered a convention by some. If you’re redirecting the root to www anyway, there is no reason to use www. You may as well use hi.example.com
as your primary domain and just redirect example.com to hi.example.com. www has no intrinsic meaning, it’s just a regular subdomain with DNS records like any other subdomain.

WOW - We have a lot of similarities, I’m so glad :laughing::heart_eyes:

My website doesn’t have many visits
so I don’t need any of that
It’s a simple private site that uses everything that is free


#25

Well, you answered my question. InfinityFree is lucky to have a knowledgeable contributor as you participating, offering guidance in their forum. You should ask Admin to pin a Development category, in which you and other advanced developers can head up. I know the majority login to post InfinityFree issues, but a Development section would be a breath of fresh air, a great asset.


#26

Thank you very much for those words :slight_smile: I appreciate it

it’s good that you ask a lot and make this subject much more interesting :slight_smile: thx !

Mr. Admin also had the desire to make from this forum something like a webmaster hub.
but it is difficult to create/collect a critical mass

because 95% of users are beginners, and those who know more; they do not want to waste time because they are not paid for it.

I also greatly appreciate my life time and try not to lose it
I help those who show interest and will or at least tried to write a question with enough information

it’s hard to help people here without enough information
beginners think it’s just enough to declare my website does not work
and that someone else would do a job for them.

they think that it can be only one problem … and in fact it can be at least 10 problems.
and writing every time all possible causes of the problem requires so many texts (essay every time)
and that is very tedious.

many users do not even give the URL of their site

they do not realize that I sacrifice my time
and every time I have to ask for the URL and more info from them



it’s as if they come to the doctor and the doctor asks them:

:mage: What’s your problem?

:crazy_face: I feel pain!!!

:mage: ok where does it hurt you?

:crazy_face: I do not know…

:mage: So what did you last do before you started feeling pain?

:crazy_face: nothing…

:mage: nothing?

:crazy_face: yes! absolutely nothing…

and then after 10 posts it turns out that the user installed wordpress, he uses cloudflare,
also edited the .htaccess file, moved it all to https, etc.

we are like idiots who have to persuade users to get more information from them…
THEY do not understand that it is in their interest that their site begins to work properly
for me is absolutely irrelevant if their website is working or not :sleeping:

Development category
script work and OOP require much more time, just to get to know the code, what it does, etc.
let alone to find the cause of the problem

if it’s fun enough and the OP has enough knowledge, than It is known that admin, me or someone else can help, but time is the most valuable thing we all have and we do not waste it

https://infinityfree.net/support/can-i-contact-support-for-script-help/

several times I spent a couple of hours trying to help people when thay write something like:
“please help !!! heeeelp !! My page does not do this and that, my theme does not work”

and then I tell them all problems in code… do this and that, change it there and there, here put xyxyyxy, blah, blah…
and after two days they completely changed website/plugins and did not use anything they asked for (topic and problems) or and what I told them…

what do you think how do I feel after that?
as an idiot who has lost a few hours of my life for someone who even does not know what he wants and actually just experimenting…

but everything seemed like he could not live without it


#27

I agree about devoting time. What I had in mind, was a Development category, under which divided into two sections; ‘Managed Website Design’ and ‘HTML Website Design’ with moderators pinning essential guides at the top like this thread. I think of ‘Other’ category being photography, bicycling… The idea is so guides would have a place pinned, not buried over time in run-of-the-mill discussions.

At first, I was going to ask you if you knew of any good website design forums. But, between here and own research I got HTML site up quickly. With above, there’d be no need to repeat fundamental guides to every newcomer.


#28

I just found Something when compressing my HTML and CSS files. Garbled characters appeared after compressing HTML. I found that HTML and CSS files should be saved as UTF-8 without BOM. After doing so, loading into compressor and setting Charset UTF-8 (and max-single line) in compression settings all is good.

Your thoughts?
.


#29

there are various compression methods and depending on them javascript code can also be corrupted
because those programs are not perfect and sometimes they do not fully understand the original code
(if the original code does not end with ; or it is incorrect and non-standard written, etc.)

text editors especially notepad from windows want to insert BOM

my advice is to download notepad ++
64bit version is here https://notepad-plus-plus.org/download/
in installation proc… just next,next,next until is finished.

after installation do this




after that open Firefox
we will add notepad ++
so it calls when you right click in firefox and pick view source on some website

You can do this by changing 2 hidden preferences.

  1. Type about:config into the location bar and press enter
  2. Accept the warning message that appears, you will be taken to a list of preferences
  3. In the filter box type view_source
  4. Double-click on view_source.editor.external to change its value to true
  5. Double-click on view_source.editor.path and set it to C:\Program Files\Notepad++\notepad++.exe (if Notepad++ is stored elsewhere change that to where it is stored)




you can also use it in windows to right click and edit html, css, and much more … (color code is good)

4