Page 2 of 4

Re: Petopia home page TEST

Posted: Sat May 26, 2018 6:59 pm
by ilixirshy
agreed, having exotics as the last button is a lil confusing if ur not like me and just go click happy. have just the three specs in their current appearance on test site and keep the exotics as just an asterisk as how it appears on current petopia site.

Re: Petopia home page TEST

Posted: Sat May 26, 2018 8:50 pm
by Wain
I'd been wondering if that might happen. I'll experiment with adding check marks/ticks to the buttons to make them look more active and clickable.

Re: Petopia home page TEST

Posted: Sun May 27, 2018 11:13 am
by Wain
Is it clear enough now? I added check marks, and an explanatory note : http://www.wow-petopia.com/index2.php

Re: Petopia home page TEST

Posted: Sun May 27, 2018 11:22 am
by Ana
Ohh very clear! ! It's super easy to understand :)

Re: Petopia home page TEST

Posted: Sun May 27, 2018 12:58 pm
by Flyra
It works very smoothly on Android. I don't see any immediate problems but it would be nicer aesthetically if the colour groups were put together. :)

Re: Petopia home page TEST

Posted: Mon May 28, 2018 2:45 am
by Wain
I think I've made it clearer that at least one spec needs to be selected (regardless of whether Exotic is checked or not).

Deselect all the specs (doesn't matter if you leave Exotic selected or not) and see what happens now :)

http://www.wow-petopia.com/index2.php

Re: Petopia home page TEST

Posted: Mon May 28, 2018 5:42 am
by SpiritBinder
Loving ya work so far, and feedback has been great!

The ticks are an excellent idea! The colour if the tick seems a little lost on the blue, and red to some extent (at least from my iPhone) Would white maybe be a bit punchier?

Re: Petopia home page TEST

Posted: Mon May 28, 2018 6:24 am
by Teigan
It's much clearer now!

Re: Petopia home page TEST

Posted: Mon May 28, 2018 7:51 am
by Wain
SpiritBinder wrote:Loving ya work so far, and feedback has been great!

The ticks are an excellent idea! The colour if the tick seems a little lost on the blue, and red to some extent (at least from my iPhone) Would white maybe be a bit punchier?
That's odd, the ticks are meant to be white. They appear that way in Firefox and Chrome. Apparently they appear black in Safari (at least on iPhone) and green in IE... or Edge or whatever MS calls it these days (does anyone use it anyway?). Grrr, looks like I have more work to do to get it looking standard :P

Re: Petopia home page TEST

Posted: Mon May 28, 2018 7:55 am
by Ana
Red to me. Both on computer and android phone. The tick is the v in the boxes right? I can see them clearly though.

Re: Petopia home page TEST

Posted: Mon May 28, 2018 8:20 am
by Wain
OK, it should be fixed!

The check symbol I use in those boxes is Unicode #2714, the "heavy check mark". The problem is that iOS (and apparently IE?) convert certain symbols into emojis (with fixed colours), and that is one of them. I did some searching and found if you add the code "\fe0e" after the check mark code it forces the browser to draw the proper font version instead of the emoji one.

With phone browsers you may need to empty your cache or view the page in a private browser window before the change will appear, as phone browsers can be hard to force proper reloads for without wiping all your web data.

Getting pages to look the same in all browsers can be such a pain. I'm so glad I have all you folks for catching these issues. Thanks :)

It looks like the page is ready to go live. There are more tweaks I could do, and I also want to add mouse-overs that say what the specs are about, but I think it's good enough to push what I have already. Please keep the suggestions coming, though :)

Re: Petopia home page TEST

Posted: Mon May 28, 2018 8:41 am
by Ana
Cleared catche on computer and yup the ticks are white now... but still red on the android phone after clearing the catche.

Re: Petopia home page TEST

Posted: Mon May 28, 2018 10:10 am
by Wain
TĂ„rnfalk wrote:Cleared catche on computer and yup the ticks are white now... but still red on the android phone after clearing the catche.
Which browser are you using on Android?

Re: Petopia home page TEST

Posted: Mon May 28, 2018 11:57 am
by Ana
Just the one who came with it. Just called Internet soo no idea if it's androids own browser.

Re: Petopia home page TEST

Posted: Mon May 28, 2018 12:03 pm
by Wain
OK, thanks. It looks like Chrome for Android ignores the code and still displays the emoji check mark. :/ It's a matter of them not supporting the web standard, but who knows how long before they'll address it. So, I've switched it to use a different check mark that I like less, but I've bulked it up and resized it to be similar to the original. It should look white on all browsers.

Re: Petopia home page TEST

Posted: Mon May 28, 2018 12:11 pm
by Ana
Yup that's white now.

Re: Petopia home page TEST

Posted: Mon May 28, 2018 12:46 pm
by Wain
I've also returned a note to mention the toggle, but placed it above the buttons. And I've made the border colours brighter. How's it looking?

Re: Petopia home page TEST

Posted: Mon May 28, 2018 3:50 pm
by Vephriel
Really nice! The little note and the addition of the checkmarks makes it a lot more obvious that they're toggles. :)

Re: Petopia home page TEST

Posted: Mon May 28, 2018 4:13 pm
by Xota
Everything looks clear and great on my browser (windows 10, firefox).

Re: Petopia home page TEST

Posted: Mon May 28, 2018 4:42 pm
by Teigan
Checked it out on Chrome on my phone and computer, and Edge on my computer. It's consistent and looks good.

Also, it would be cool to have mouse-over for the pet type check boxes.