Feedback wanted on appearance of website, as seen on phones

Page 1 of 1 [ 4 posts ] 

Mona Pereth
Veteran
Veteran

Joined: 11 Sep 2018
Age: 62
Gender: Female
Posts: 3,349
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.
- My life as one of the many belatedly-diagnosed autistic older people.
- Queens groups on Meetup.com.


Fenn
Blue Jay
Blue Jay

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 93
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(undiagnosed - maybe)


Mona Pereth
Veteran
Veteran

Joined: 11 Sep 2018
Age: 62
Gender: Female
Posts: 3,349
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.
- My life as one of the many belatedly-diagnosed autistic older people.
- Queens groups on Meetup.com.


Fenn
Blue Jay
Blue Jay

User avatar

Joined: 1 Sep 2014
Gender: Male
Posts: 93
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(undiagnosed - maybe)