Feedback wanted on appearance of website, as seen on phones

Page 1 of 1 [ 7 posts ] 

Mona Pereth
Veteran
Veteran

Joined: 11 Sep 2018
Gender: Female
Posts: 7,810
Location: New York City (Queens)

04 Apr 2021, 4:55 pm

I would appreciate some feedback on the physical appearance of my website Autistic in NYC, as seen via smartphone.

Currently I think my website looks good on a laptop, desktop, or tablet, but not so great on a phone.

It does detect whether it is being viewed via a phone or via a larger device. And, in the event that this isn't correctly detected, there's also a link you can click to "Make this look nicer on your PHONE" or "Make this look nicer on your PC / LAPTOP / TABLET," as appropriate.

The phone version puts everything in one long column, whereas the PC version has a 3-column layout. The phone version also has links you can click to choose whether the menu appears at the top or at the bottom. (It appears at the bottom by default.)

Ideally the option to display or hide the menu at either the top or the bottom would be done by clicking on standard icons: (1) the standard 3-bar "hamburger" icon in a box to display the menu and (2) the standard X in a box to hide/close the menu. However, I would want a matching pair of icons, with similar style, including similar boxes. But I'm not a graphic artist myself, and, so far, I haven't found a nice-looking (in my opinion) matching pair of these icons on free downloadable graphics sites.

At some point I'll probably pay someone to make these icons for me, preferably a graphic artist or web designer who happens to join a local NYC-area autistic adult support group. Back in early 2020, I was in process of making arrangements with just such a person, but then we lost contact with each other after the COVID crisis erupted.

Last night I did some work to make the phone version look a bit better than it did before, but I'm still not satisfied with it.

The website uses a template that I created using PHP. (I used PHP because that's what's most convenient on my web host without paying for a more expensive plan. For serious interactive web apps, I would use Java servlets/JSP instead.)

Anyhow, I would appreciate any feedback on the appearance of the site on your phone, including font sizes (especially font sizes in menu links), spacing (both horizontal and vertical), and any other issues that jump out at you.


_________________
- Autistic in NYC - Resources and new ideas for the autistic adult community in the New York City metro area.
- Autistic peer-led groups (via text-based chat, currently) led or facilitated by members of the Autistic Peer Leadership Group.
- My Twitter / "X" (new as of 2021)


Fenn
Veteran
Veteran

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 2,404
Location: Pennsylvania

04 Apr 2021, 9:15 pm

I think that rather than trying to detect the device you can detect the number of pixels horizontal or vertical.


_________________
ADHD-I(diagnosed) ASD-HF(diagnosed)
RDOS scores - Aspie score 131/200 - neurotypical score 69/200 - very likely Aspie


Mona Pereth
Veteran
Veteran

Joined: 11 Sep 2018
Gender: Female
Posts: 7,810
Location: New York City (Queens)

06 Apr 2021, 2:01 am

Fenn wrote:
I think that rather than trying to detect the device you can detect the number of pixels horizontal or vertical.

Theoretically, yes, but the last time I looked into doing it that way, back in December 2019 or so, not every browser supported an ability to detect the size of the browser window in pixels. So at that point I made a decision to detect the device instead.


_________________
- Autistic in NYC - Resources and new ideas for the autistic adult community in the New York City metro area.
- Autistic peer-led groups (via text-based chat, currently) led or facilitated by members of the Autistic Peer Leadership Group.
- My Twitter / "X" (new as of 2021)


Fenn
Veteran
Veteran

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 2,404
Location: Pennsylvania

10 Apr 2021, 2:45 pm

I don't use the internet on my phone - because I tend to hyper focus and perseverate and loose HUGE amounts of time when I do. Also my iPhone went swimming with me once and didn't work much after that. So I just got a dumb phone.

I visited your web site and resized my laptop browser to smart phone dimensions and then clicked "make this look better on your phone".

It was readable enough. I would make several different choices:
You don't use any standard icon-buttons - if this is a conscious choice - more explicit and verbose on purpose, consider using the standard icons-buttons too - they are a kind of visual languages people who use smart phones get used to (or even people who use web sites designed for smart phones get used to).

Fonts: sarif or sans-serif. Places where I am used to seeing sans I am seeing serif.

Colors: You made unusual color choices.

My reading on UI design tells me basically this: "easy" often translates to "expected" - knowing what is "expected" can be done two ways: do lots and lots and lots of research - or just imitate a well known web site that already did all that research.

The second way is the way I choose when I need to design a UI. I looks like you decided to design your web site according to your own choices not using any well-know site as an example and not doing any research.

There are web sites that talk about designing UI for Android and iPhone - here is a bad choice - design for Android only and expect the iPhone people to like it too - another bad choice - design for iPhone only and expect the Android users to like it too. There are pages specifically discussing "typical choices" for Android and alternatives for iPhone, and visaversa - if I were designing a web site I would read up on as many of those as I could find.

Also: for browser sniffing it usually makes life easier to use a good javascript library with cross-browser support (read that "protect the developer from the worst problems with lack of browser compatibility - not to browsers are alike - they just aren't")

https://stackoverflow.com/questions/982 ... ries-exist

You may be making considerations that I am not thinking of - like "screen reader friendly for the visually handicapped" or "hi contract for the visually impaired" or "text-only-browser (like lynx) friendly". Or "I like Ubuntu human-like colors so my web site is entirely earth tones".

If this the case you might want to add an "about" page to make those choices explicit.

Here are a few articles:

https://visualhierarchy.co/blog/designi ... practices/
https://bronto.com/blog/mobile-experien ... -practices
https://www.noupe.com/design/mobile-web ... tices.html
https://www.webdesignerdepot.com/2015/0 ... mobile-ux/
https://www.osnews.com/story/131688/the ... usability/


_________________
ADHD-I(diagnosed) ASD-HF(diagnosed)
RDOS scores - Aspie score 131/200 - neurotypical score 69/200 - very likely Aspie


Mona Pereth
Veteran
Veteran

Joined: 11 Sep 2018
Gender: Female
Posts: 7,810
Location: New York City (Queens)

15 Apr 2021, 1:12 am

Fenn wrote:
I don't use the internet on my phone - because I tend to hyper focus and perseverate and loose HUGE amounts of time when I do. Also my iPhone went swimming with me once and didn't work much after that. So I just got a dumb phone.

I use a dumb phone too, which is why I'm asking for feedback from smartphone users.

Fenn wrote:
I visited your web site and resized my laptop browser to smart phone dimensions and then clicked "make this look better on your phone".

It was readable enough. I would make several different choices:
You don't use any standard icon-buttons - if this is a conscious choice - more explicit and verbose on purpose, consider using the standard icons-buttons too - they are a kind of visual languages people who use smart phones get used to (or even people who use web sites designed for smart phones get used to).

I explained this in my first post in this thread. I do plan to use standard icon buttons eventually.

Fenn wrote:
Fonts: sarif or sans-serif. Places where I am used to seeing sans I am seeing serif.

Just using the default font. I'll consider the possibility of using sans, at least for some things.

Fenn wrote:
Colors: You made unusual color choices.

I didn't know there were standard color choices. Different sites use different color choices.

What I do know, from firsthand experience, is that some of the more popular color schemes are very difficult for older people to read, e.g. pale gray font on a slightly paler gray background.

Fenn wrote:
My reading on UI design tells me basically this: "easy" often translates to "expected" - knowing what is "expected" can be done two ways: do lots and lots and lots of research - or just imitate a well known web site that already did all that research.

I actually find a lot of well known web sites to be very annoying, in one way or another, so I prefer to work from justifiable principles rather than just imitate.

Fenn wrote:
The second way is the way I choose when I need to design a UI. I looks like you decided to design your web site according to your own choices not using any well-know site as an example and not doing any research.

There are web sites that talk about designing UI for Android and iPhone - here is a bad choice - design for Android only and expect the iPhone people to like it too - another bad choice - design for iPhone only and expect the Android users to like it too. There are pages specifically discussing "typical choices" for Android and alternatives for iPhone, and visaversa - if I were designing a web site I would read up on as many of those as I could find.

I'll look into the above.

Fenn wrote:
Also: for browser sniffing it usually makes life easier to use a good javascript library with cross-browser support (read that "protect the developer from the worst problems with lack of browser compatibility - not to browsers are alike - they just aren't")

https://stackoverflow.com/questions/982 ... ries-exist

I'd rather not use Javascript for this purpose. One of my pet peeves is the super-abundance of Javascript on most websites these days, which is one of the factors resulting in pages that take forever to load (especially for users with less-than-super-high-speed Internet connections) and eventually crash the user's browser.

Currently I just have PHP parse the user-agent string. I know this isn't 100% foolproof; hence my "Make this look nicer ..." links.

As for detecting window size, there's supposed to be a very easy way to do this via CSS, but not all browsers supported this as of December 2019. I'll look into this again in another year or two.

Fenn wrote:
You may be making considerations that I am not thinking of - like "screen reader friendly for the visually handicapped" or "hi contract for the visually impaired" or "text-only-browser (like lynx) friendly". Or "I like Ubuntu human-like colors so my web site is entirely earth tones".

Yes, relatively high contrast for people with mild visual impairments, such as myself and probably the majority of older people, is indeed a concern. I also want to be screen-reader friendly -- another reason to avoid over-reliance on Javascript.

Fenn wrote:
If this the case you might want to add an "about" page to make those choices explicit.

At some point I should probably add something about my design choices on my already-existing "About" page.

Fenn wrote:

Thanks. I'll look at these later.

Thanks for your feedback.


_________________
- Autistic in NYC - Resources and new ideas for the autistic adult community in the New York City metro area.
- Autistic peer-led groups (via text-based chat, currently) led or facilitated by members of the Autistic Peer Leadership Group.
- My Twitter / "X" (new as of 2021)


Fenn
Veteran
Veteran

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 2,404
Location: Pennsylvania

The_Znof
Veteran
Veteran

User avatar

Joined: 14 Sep 2011
Age: 54
Gender: Non-binary
Posts: 1,133
Location: Vancouver Canada

17 May 2021, 3:19 am

[ I took a first impression look, first thing I noticed is Seems to Me very initiative to scroll down and nice Looking background.

Also at this point [ before scrolling down] I can’t see an improvement being made with font sizes]


Some of the fonts Themselves and colours look good To me , esp the autistic in nyc on top, and I like the way the hide menu sits on the left, quite a bit, contrasting the autistic in nyc top left, other left lol.

I like home and the bullet points , but the links by the bullets maybe different fonts and or colours

The text under the large autistic in nyc header, it sits funny on my 720p iPhone

Not bad, but gets in the way of your cooler stuff , which Is esp the bigger text contrasting left and right on the top.