Jump to content

Responsive design beta feedback


fisk

Recommended Posts

  • Administrators

This is the feedback thread for the responsive design beta. If you do not want to use responsive design, you can opt-out by going to your preferences on backpack.tf or selecting the option in the footer.

 

Before the responsive design update is fully out of beta, we aim to target tablet devices with more compromising layouts. The current design has been focused on devices that have a CSS pixel width of 360 pixels. This is not the same as a phone's native resolution; the CSS pixel width of a modern Android phone is usually a third of the native resolution. This can vary based on the device's DPI.

 

This thread is for reporting issues with user experience. When reporting issues with the layout, please specify the mobile browser you have installed and the model of the device you are using. On Android, you are recommended to at least be using Google Chrome, as the Android Stock Browser is very out-of-date and does not support multiple features that responsive design utilises.

 

Edit: don't post other issues here. Responsive styles issues only.

Link to comment
Share on other sites

Tested it out. I like it, but there is one big issue, so to speak. Ads. Screenshots attached.

If you could just do something to make the ads longer when the device is in landscape mode that would be great, thanks.

Yeah, I could just donate or report all the ads for covering half the screen, but I'm a cheapskate and it's annoying to do that for every page.

 

iPhone 4S, safari.

http://imgur.com/a/hnW79

Link to comment
Share on other sites

I'll test this with my iPhone 5s and iPad (in about two weeks for the iPad)

 

Edit:

 

Not many problems with ads, or in general, on phone

 

There's one banner ad that floats just above the bottom of the screen and one huge ad in the middle of some pages, but that's really it

 

Checked Stats, Suggestion, Classified, and Home pages

Link to comment
Share on other sites

May I ask why I'm being presented with this responsive site via a desktop computer? It's generated a myriad of issues including but not limited to, not being able to open specific item pages after searching for them in the top bar, my profiles background image being stretched out of all proportion versus being tiled, ontop of which not being able to change my name-style either, at a bit of a loss here but perhaps it's still being worked on?

 

06XOj7D.png

 

Same thing on chrome as firefox.

Link to comment
Share on other sites

The only really problem I had with mobile was the nav bar not being resized smaller when I zoomed in, now you added 

user-scalable=no

Which breaks how your website responds. I can't zoom out to search anymore. 

 

I learned about 4 months ago of this, helps SO MUCH! 

https://css-tricks.com/viewport-sized-typography/

 

It says typography but it works on any element.

 

http://codepen.io/anon/pen/BNvWyr

 

I used some elements from a project for a language class which is why its so messy, but its 2 am and I can't be bothered to fix it

Link to comment
Share on other sites

  • Administrators

Tested it out. I like it, but there is one big issue, so to speak. Ads. Screenshots attached.

If you could just do something to make the ads longer when the device is in landscape mode that would be great, thanks.

Yeah, I could just donate or report all the ads for covering half the screen, but I'm a cheapskate and it's annoying to do that for every page.

 

iPhone 4S, safari.

http://imgur.com/a/hnW79

 

Hi,

 

Yesterday evening I modified the ads to only display when the viewport was high enough (>568px). Unfortunately there's a bit of constraint where rotating your device while viewing a page won't update the visibility of the ad based on the media query. It's fine if you refresh, though.

 

Kinda wish we were using a smaller ad unit, because the current unit is also getting ads that are half the height and make the unit look like it's floating. On second thoughts, I'll likely remove the floating add altogether. I don't like how intrusive it's getting and it's becoming a pain.

 

Update while I'm writing this - I've removed the fixed unit. Users using the responsive style will now just get an ad above the footer.

 

The only really problem I had with mobile was the nav bar not being resized smaller when I zoomed in, now you added 

user-scalable=no

 

The user-scalable attribute is only ever set to 'yes' if responsive is enabled. Otherwise, the entire viewport flag is omitted to allow the site to act as the desktop site on a mobile device.

 

 

May I ask why I'm being presented with this responsive site via a desktop computer? It's generated a myriad of issues including but not limited to, not being able to open specific item pages after searching for them in the top bar, my profiles background image being stretched out of all proportion versus being tiled, ontop of which not being able to change my name-style either, at a bit of a loss here but perhaps it's still being worked on?

 

06XOj7D.png

 

Same thing on chrome as firefox.

 

You seem to be viewing websites at an ~80% zoom? This is still the desktop site.

Link to comment
Share on other sites

Same issue with the search function, also can't search for items in inventory. this is with windows 8 on desktop with the responsive design on

nixoeHt.jpg

Link to comment
Share on other sites

The user-scalable attribute is only ever set to 'yes' if responsive is enabled. Otherwise, the entire viewport flag is omitted to allow the site to act as the desktop site on a mobile device.

 

Weird, on my phone (can't screenshot right now), the viewport is all fucked up. with the beginning looking like a mobile website but then the inventory is resized to fit a desktop so I have to scroll horizontally back and forth to see items. And I can't zoom out because of use-scalable. There isn't even a desktop site option, when I manually go into settings and choose desktop site nothing changes.

Link to comment
Share on other sites

Edit: cleared my bp.tf cache, seems okay now

All items in my backpack have been shifted forward a single slot since this was implemented.

Page 29 shouldn't exist here:

 

ZPQZstyh.png

Link to comment
Share on other sites

everything looks great, and works fine, just hard to get used with double scroll pages, like main page classified ads or recent changes, also, when i go on my "navigation bar" i can scroll down, but its scrolls together with my browser. Same in lotto chat, when i want to scroll chat, it scrolls all window with chat.

Phone: Samsung Galaxy Ace 2

Android version: 5.1.1

Browser: FireFox

By the way, to make this more usefull download

"ICE CLIENT: STEAM TRADING" app from Google play, which is a third party app of steam, and gives ability to TRADE. Only android, sorry ios fellas. (i want to say that when you click trade offer link on classifieds, it will open with ice client, to make a trade offer, which you need)

link: https://play.google.com/store/apps/details?id=com.aegamesi.steamtrade

sauce code:https://github.com/aegamesi/SteamTrade/tree/master

Link to comment
Share on other sites

everything looks great, and works fine, just hard to get used with double scroll pages, like main page classified ads or recent changes, also, when i go on my "navigation bar" i can scroll down, but its scrolls together with my browser. Same in lotto chat, when i want to scroll chat, it scrolls all window with chat.

Phone: Samsung Galaxy Ace 2

Android version: 5.1.1

Browser: FireFox

By the way, to make this more usefull download

"ICE CLIENT: STEAM TRADING" app from Google play, which is a third party app of steam, and gives ability to TRADE. Only android, sorry ios fellas. (i want to say that when you click trade offer link on classifieds, it will open with ice client, to make a trade offer, which you need)

link: https://play.google.com/store/apps/details?id=com.aegamesi.steamtrade

sauce code:https://github.com/aegamesi/SteamTrade/tree/master

ICE client is not affiliated with backpack.tf. Therefore I doubt any of the devs would waste time on this. You are more than welcome to recommend a easy way to implement this without getting in other people's way, but again, you are going to have to do it yourself.

Link to comment
Share on other sites

It is not affiliated by backpack.tf it is made by other guy, to let people trade on mobile phone. And iI just recommend this just because not to make "classified listings" useless when you can't buy/sell stuff. So that's why iI offer to use it lol.

Link to comment
Share on other sites

It is not affiliated by backpack.tf it is made by other guy, to let people trade on mobile phone. And iI just recommend this just because not to make "classified listings" useless when you can't buy/sell stuff. So that's why iI offer to use it lol.

I know what ICE client is, I am saying if you want to combine classified listings with ICE client, you have to do it yourself. Asking ae or backpack.tf to provide this functionality is not logical as there are more serious problems to deal with.

Link to comment
Share on other sites

What so you mean? It is working when you click o classified listing trade link, IR lightening bolt, it automatically asks you to open with ICE or BROWSER but you have to be logged on ICE. Ae is still working on many things right now, but I guess, it will be fixed that when you are not logged in, it will redirect to trade offer anyways, after you log in.

Link to comment
Share on other sites

  • Administrators

Weird, on my phone (can't screenshot right now), the viewport is all fucked up. with the beginning looking like a mobile website but then the inventory is resized to fit a desktop so I have to scroll horizontally back and forth to see items. And I can't zoom out because of use-scalable. There isn't even a desktop site option, when I manually go into settings and choose desktop site nothing changes.

 

That's not actually a problem with the viewport. I'm going to be changing how the backpack viewer functions on a mobile device, so what you see is actually just a placeholder. The current backpack viewer is horrid on a mobile device for a few reasons:

 

* Scrolling up and down a large backpack takes you away from the filters, which is painful to scroll back up to

* There's a lot of items to display

 

A lot of stuff regarding the backpack and third party scripts broke because I had changed how backpacks were formatted. Pages are no longer a single massive list hackily separated by a blocking page label, and are instead contained inside their own divs. This required a much-needed rewrite of the filtering scripts. This is all so the content can be adjusted to a mobile-friendly design before the end of the beta.

Link to comment
Share on other sites

That's not actually a problem with the viewport. I'm going to be changing how the backpack viewer functions on a mobile device, so what you see is actually just a placeholder. The current backpack viewer is horrid on a mobile device for a few reasons:

 

* Scrolling up and down a large backpack takes you away from the filters, which is painful to scroll back up to

* There's a lot of items to display

 

A lot of stuff regarding the backpack and third party scripts broke because I had changed how backpacks were formatted. Pages are no longer a single massive list hackily separated by a blocking page label, and are instead contained inside their own divs. This required a much-needed rewrite of the filtering scripts. This is all so the content can be adjusted to a mobile-friendly design before the end of the beta.

Does this mean my browser won't crash whenever I try to open a backpack with thousands of items?
Link to comment
Share on other sites

  • Jessecar unpinned this topic

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...