ramoona / banks-db-demo Goto Github PK

Right now form has bigger border radius, than on real bank card. To be absolutly awesome, we should copy real border radius.

Gray on white is not a best color. Idea of chaning title color to bank color is nice, but we can use default link blue color on start.

Right now demo page has horizontal scroll on Nexus 6P.

Each GitHub repo has description and homepage field on top of main page. I think, we should use it.

We should mark, that only first gidits is requires. Maybe we should change placeholder to 0000 00XX XXXX XXXX. Also we can write it in description from #3.

Some users will find this page by search engines.

So we need to put extra info and links to this page.

Users will make a mistake typing all credit card numbers.

When user enter unknown BIN, we should mark that we didn’t know this bank and ask user to contribute to project.

Can we add localization based on client IP?

Halter font is awesome. We recommend it in Best Practices, so we should use it also here.

Every site should have favicon. In my experience we need only 32×32 favicon.ico and 192×192 apple-touch-icon.png.

All other sizes can be converted from this sizes. File size is not really important for page performance, requests count is much important. With standard favicon.ico and apple-touch-icon.png names browser will load images even before finish HTML request. As result bigger favicon.ico will be downloaded faster than special favicon.16px.png build from HTML meta-tags.

It is tricky question, what image we should add to favicon. But I think any image is better, than nothing :).

For example, we can take any free bank icon (some simple, because favicon.ico will be converted to 16×16 is most of cases). Then we keep left part of icon in black and right part changing to blue color from README.md screenshot. This half-painted bank icon is a good illustration of library’s idea.

GH Pages are now using HTTPS, so it's possible to have autofill for card number field in Google Chrome. To enable autofill we need to add special attributes to input.

If we write links to demo page in Facebook, right now we will get:

Link card has no image and no description.

We should cover this case and add OpenGraph meta-tags (they are common for every social network). We need some screenshot example like in banks-db’s README.md and short description.

Here is useful links:

• OpenGraph Debugger, because main facebook caches links cards.
• Facebook Best Practices, they are common for VK too.
• Choosing a best OG image size

I think Facebook sharing is important for demo page, because non-coder designers is a good client market too :).

1. HTTPS is better for any page with bankcard number.
2. Chrome enables bankcard number autocomplete on HTTPS pages.

But it is long-term issue, because seems there is no easy way to enable HTTPS on GitHub Pages right now: isaacs/github#156

We should add description and keywords meta-tags. They are not so important, but some engines uses it.