20 ms·
Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window
by jefftk 6y ago
Sites are not detecting a portrait screen and deciding that they're displaying on a phone. Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view.
In this case the author is scaling their resolution, and so their browser is presenting itself to sites as 720px wide. Sites see that and show a layout optimized for a screen of that width. Those sites are acting correctly.
The author's proposed solution is for sites to use DPI instead, but this would thwart the preferences of users who use scaling because they want the whole site to look bigger.
- asiando 6y agoAgreed completely. One mistake that designers/developers do though is to completely give up under 1000px so we get this swaths of whitespace and a hamburger. That’s a waste of estate and a waste of my time.
- iamben 6y agoYeah, I still very often get "here is the desktop design, here is the mobile design". Depending on who is developing the designs depends how that's going to translate. I have all the time in the world for developers that reflow the page and remove/adjust elements at different breakpoints (based on the design) between 'desktop' and 'mobile' so the experience is good for everyone. Sadly, most people don't bother.
- tehbeard 6y agoConvincing a client to pay for time to spend checking the design and tweaking it in the space between the breakpoints can be more hassle than it's worth. That said, sane breakpoints can usually avoid unexpected hamburgers on the desktop.
- dstick 6y agoAgreed, Tablet is the only intermediate I consider. The rest is just not worth the time investment.
- paledot 6y agoYou convince them in the same way you convince a PM to give you time to write tests for your work: you don't give them an alternative. "You want this done? That'll be 20 billable hours." And your estimate includes the time needed to do work you're willing to sign your name to. When I hire a plumber or an architect, I tell them what needs doing, but I expect and trust that they'll put in the work (and bill me accordingly) to ensure that it gets done properly, even though I don't understand all of the specifics of what doing those jobs properly entails.
- DangerousPie 6y agoIf desktop + mobile make up >95% of your audience it's hard to justify the cost of creating a third set of rules for the rest.
- reaperducer 6y agoThat makes sense on the surface, but you should design for all possibilities, current and future. I learned this lesson the hard way. The client was on desktop. The users were 40% phones. Everything was great for months and months. Then one day the owner of the company that owned the company tried to look at the web site on her grandkid's iPad. Fan met shit that day.
- owlmirror 6y agothat's something I don't understand. the Dev tools in Chrome and Firefox make it really easy to test through every resolution without problems. every UI change I make I view in all possible resolutions and its quite obvious of something breaks and I adjust accordingly.
- DangerousPie 6y agoThe tooling isn't the problem, time is. Every device and resolution you support takes time and at some point you hit a point of diminishing returns.
- account42 6y agoIf it takes too much time, you are probably doing something wrong like having hardcoded layouts for different resolutions instead of using reflow as much as possible.
- innocenat 6y agoEven with all reflow it's hard. Should I reduce a width a little bit more so that it become 3 columns instead of 2 on iPad vertical at risk of having some line wrapped? Things like that.
- prox 6y agoI believe true webdesigners are in decline. You have lots of people who do this as a side gig after reading a few tutorials. In a way that’s a nice compliment for the accessibility of the tech, but not accessibility for the end user. Same with “We only tested this on Chrome.” of sites/apps, of which are there are many, as I can attest, as I never use Chrome.
- mywittyname 6y agoIt's just plain hard to keep up with front-end tech. Most people use front-end dev work as an entry point. They quickly realize there are more sane jobs available on the backend and migrate there.
- devmunchies 6y ago> sites/apps I don't think apps are as relevant to current discussion. For apps (not public websites), there are different requirements depending on the target audience. I wouldn't be mad at a B2B web app being desktop only, no mobile CSS. But I agree that web apps should still be compliant with safari + FF + Chrome.
- jefftk 6y ago> I believe true webdesigners are in decline. You have lots of people who do this as a side gig after reading a few tutorials. In decline from when? Picking it up after reading a few tutorials has always been a common way to get into web work, and if anything I feel like it's been getting more professionalized over the last twenty years.
- prox 6y agoJust the general gist over the last few years. I am not saying there are no really skilled professionals, I am just seeing a lot of lower par work from jobs I take over. Plus just by surfing the web and noting the quality.
- girvo 6y agoI’ve been doing web development since 2007, and I’m struggling to think of an era that had more professionals doing front end than we have now. I’m not sure my experience agrees with you
- AlchemistCamp 6y agoI've emailed one of YC's huge successes multiple times over years about how it's frustrating to have horizontal scrolling on a browser that's half of a 1080p display wide (i.e., nearly 1000px). Unfortunately, the horizontal scrolling UX with substantial wasted whitespace on the sides remains.
- andylynch 6y agoIt could be worse. One particular web app I use daily has horizontal scroll bars even when full screen (and has some off the main info at far right).
- ansible 6y agoName and shame. That's the only way it gets better.
- pmalynin 6y agoSounds like the Azure Dashboard, but I haven’t used it in years
- FridgeSeal 6y agoThis is the unmitigated disaster that is the Azure dashboard isn’t it?
- jiofih 6y agoFor some reason people adopted 1040px-1080px as a default - I think it’s twitter Bootstrap’s fault. 980 or even less is much more reasonable.
- rdsubhas 6y agoI've found sites using Material UI guidelines (heavy use of cards and navbar hamburger) especially culpable to this. Huge gap of greyish whitespace with a hamburger in the left. Someone else mentioned bootstrap in the other thread too. Maybe because these Frameworks are hugely popular, their defaults amplify the impact. Definitely these values are tweakable.
- asiando 6y agoUsers of CSS frameworks do it to cut corners and follow whatever the framework suggests. “The small breakpoint is 768px wide? I guess below it it’s a phone, I hope you like burgers”
- tyingq 6y agoThe example of https://www.just-eat.co.uk/ https://www.just-eat.co.uk/ bailing out to a hamburger menu at 768px, just to deal with 5 navigation options is a bit much.
- Wowfunhappy 6y agoAs it happens though, with the navigation design they chose, the entries wouldn't fit at that width. They certainly could have added an extra breakpoint where the navigation becomes smaller before bailing to a hamburger, but of course that does add complexity.
- sillysaurusx 6y agoThis doesn't address the author's central argument, which is that websites need an effortless way of letting fonts become bigger without affecting the entire layout. I've wanted it too. I don't really care if some text gets cut off on headers and looks weird, I just want to read stuff from the comfort of my bed with my laptop a few feet away.
- stronglikedan 6y agoI love that Chrome on Android lets me zoom into any content on any site, regardless of how bad the devs borked the UX. (Yes, devs, if you don't allow me to zoom using the browser's built-in capabilities, you have borked the UX, and should be ashamed of yourselves.)
- KLexpat 6y agoIf you have a windows 10 laptop, pinching on the touchpad seems to give you the same zoom functionality now. vastly superior than the one built into the browser
- Robotbeat 6y agoI didn’t know this! And inability to do this is a huge pet peeve (as well as not being able to zoom OUT and get a desktop-like view on my phone). Does this work on any browser for iPhone?
- falcolas 6y agoJust confirmed it works on Firefox and Safari. Though I seem to recall seeing some sites which break that functionality with CSS.
- Aerroon 6y agoThis is one of the main reasons I prefer using a website on my phone as opposed to an app. Some apps allow me to zoom others don't. The browsers lets me do that regardless.
- ficklepickle 6y ago
- ur-whale 6y ago>Someone who switches their monitor to portrait, or resizes a window to be taller than it is wide, is still going to get the desktop view. My experience has been the exact opposite of what you're saying. And the result is, 90% of the time, a site that goes from usable to unusable.
- jefftk 6y agoWhat viewport width are you providing in that case?
- ur-whale 6y agoI typically go from width=1920 x height=1080 (or larger but with similar aspect ratio) to width=949 x height=1028 On many sites, this trigger the appearance of the dreaded hamburger menu.
- jefftk 6y agoWhen people lay out desktop sites, 960px is the smallest common minimum design width. Many of these sites are statically laid out, and if rendered with the width of 949px would require horizontal scrolling.
- nobleach 6y agoYes, and webdevs have been trying for over 10 years now to figure out how to get this right. Has no one just stopped to consider having a browser send a `prefersMobileView` or `viewport:phone` or anything like that? I can remember back a few years ago, an iPhone 6+, turned sideways could get a desktop view on some sites... simply because it met the requirements set by the author. Now, the author's assumptions were wrong of course, but all we have to go on, is literally guesswork. We're told constantly NOT to use user-agent strings, but honestly, it's like we really need something to key off of. I know the A List Apart folks would have us create content that can be viewed on ANY viewport, but I consider that a tad bit unrealistic. I've been out of Front-end dev for a few years though, so perhaps things have changed.
- jefftk 6y agoMobile vs Desktop is not a clean division: screens run the full range of widths. Instead, developers should: * Lay out content based on the viewport width, in CSS pixels. * Use larger tap targets for coarse pointers (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...).
- jon-wood 6y agoI had no idea that detecting coarse pointers was a thing, thanks for calling that out!
- badsectoracula 6y ago> Lay out content based on the viewport width, in CSS pixels. This is wrong because the viewport width is not the same as the monitor width or the DPI: especially on big monitors running the browser fullscreen is very hard to use (my browser rarely exceeds more than ~50% width on a 2560x1440 monitor and even when i use a 1366x768 monitor - which btw is at 22", not some tiny laptop one - i very rarely use it maximized).
- jefftk 6y agoThe viewport width is the browser width, not the screen width. What are you saying is wrong with using the viewport width?
- ortusdux 6y agoThe A.V. Club took flak for turning all their lists into slide-shows on desktop. Their response was to tell people to adjust their browser width to force the mobile view. When you load a page, it preloads the assets for both views and switches based solely on window width. If you play an embedded youtube video and try and toggle full screen mode, the site reverts back to slide-show and breaks the video. example: https://tv.avclub.com/the-hunt-is-on-with-clarice-the-equalizer-and-more-of-1846154390 https://tv.avclub.com/the-hunt-is-on-with-clarice-the-equali...
- hellotomyrars 6y agoThat's horrific. And the content is off center at full res so they can load their sidebar that well, isn't so much as off to the side as halfway into the center of the screen.
- sn_master 6y agoI can't use HackerNews on my monitor without scaling. If I press Ctrl+0 on Chrome, the site becomes unusable.
- jefftk 6y agoHN has chosen to use very small fonts; I also leave it a bit zoomed in. Specifically, they have: .comment { font-size: 9pt; } .commhead { font-size: 8pt; } If I turn off all the site's font-size overrides, I no longer need to zoom in.
- ryandrake 6y agoPersonally, I'm not a fan of having a web site designer thousands of miles away from me just decide what font and text size I should be using to read their web site. Why not let the browser more easily control/override this? We already have PDF if your content truly needs pixel-perfect layout. Browsers have kind of dropped the ball. They're limiting user choice and slowly turning into desktop publishing platforms rather than being agents of the user.
- int_19h 6y agoMost browsers have a "minimum font size" setting, which would be applicable here. In general, CSS already provides a bunch of generic font families and sizes. So a page could style something as e.g. "sans-serif" and "large" - and then the browser should figure out what this actually means according to user settings. The problem is that very few sites actually use these. But for those that do, the browsers do the right thing - and, again, most of them let you configure what the generic font families map to.
- peheje 6y agoBoth Chrome and Safari has accessibility features to set a minimum font size in their settings page. I can't see how it could be easier.
- 6y ago
- freebreakfast 6y ago> The author's proposed solution is for sites to use DPI instead This is untenable as well. You'll end up with microscopic websites on high DPI phone screens.
- mywittyname 6y agoThis should result in the website knowing that the screen is 7" inches (dots-per-inch / dots = inches) across and setting the style for small devices.
- freebreakfast 6y agoThis requires the use of JavaScript to style a website.
- mywittyname 6y agoIs that really an issue? Javascript is basically universally supported on the web. Users with NoScript will just have to live without some functionality. I'm sure they are used to that already, since a large fraction of websites use JS for styling. (I use NoScript)
- freebreakfast 6y ago> Is that really an issue? Setting aside the debate about separation of concerns. Yes, it has notable performance and UX implications. > Users with NoScript will just have to live without some functionality. Why should we prioritize OP's use case over that of NoScript users?
- ss64 6y agoWhat I use is @media (pointer: coarse) and (hover: none) { If you have a mouse plugged in, you get the desktop design.
- hypertele-Xii 6y ago
- brundolf 6y agoI would add to this that the specific sites in question have fairly unreasonable media-queries: The Guardian breaks to mobile at 980px, and Just Eat at 1024px. On my MacBook Pro with default scaling, these are both more than 50% the width of the monitor; i.e. if I size the window to half-screen, I'm in mobile mode on these sites. For reference, in sites I make I usually set the mobile breakpoint closer to 768px (note that this isn't a question of increasing pixel-density on phones; "CSS pixels" are virtualized to approximate the same physical size across devices, though they get affected by display-scaling too). So IMO it just comes down to some sites doing a bad job of picking responsive breakpoints. Edit: Out of curiosity I checked MDN, and their media query tutorial has you set the mobile breakpoint at 40em. Default font size at least on desktop is 16px (again, virtual pixels which scale with display-scaling and device size), which comes out to a breakpoint width of 640px: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
- esrauch 6y agoiphoneX looks like it has a css px width of 812px. They may also be trying to capture tablets, which are pushing above 1024 css px.
- brundolf 6y agoI just checked and the iPhone X has a height of 812px. It has a width of 375px. The regular iPad has a width of 768px, and the iPad Pro has a width of 1024px. So you could be right about them trying to capture all tablets, though a hamburger menu on the enormous iPad Pro sounds just as ridiculous as it does on a vertical monitor
- yurishimo 6y agoThe hamburger is more for "better" touch navigation though. I know these devices work fairly good with standard hover type states now, but the UX could be argued to be better when optimized for touch inputs. Sizing is another matter entirely, in which I would agree, yea a tiny hamburger menu on an iPad Pro is likely bad. We all have engineering budgets though and in the grand scheme of things, iPads are likely a small fraction of the visitor base for these sites, so I get it. ¯\_(ツ)_/¯
- marssaxman 6y agoI prefer to browse with portrait-mode windows, and often find that sites give me the mobile layout unless I stretch the browser out wider than I'd prefer. It is annoying.
- tomjen3 6y ago@media and (pointer: fine) { your computer specific CSS rules goes here } No reason to tell a tall window it is on a phone.
- bcrosby95 6y agoYou're missing the forest for the trees here. Sites are using pixels as a proxy for physical device size. Which obviously breaks. I doubt people actually intend to display mobile view on a 720px, 12" wide device. They're only working correctly if you ignore the intent and only look at the technical implementation. The technical implementation is flawed and doesn't accomplish the intent.
- contravariant 6y agoBut the OP is using pixels as a proxy for screen size as well, they're deliberately presenting their screen as 720x1080 to make the fonts bigger because they are too far from the screen. The stupidest thing to do at that stage would be to say "ah I see you're running a low resolution on a huge screen, let me make all the text tiny".
- cratermoon 6y ago> they're deliberately presenting their screen as 720x1080 to make the fonts bigger because they are too far from the screen. As I read this I: 1. am wearing my computer reading glasses +1.5 2. have my browser set to zoom HN by 125% 3. am reading distance from the screen I know programming and tech in general is a young man's game, but let's at least try not to be ignorantly ageist & ableist.
- contravariant 6y agoI have no such intention, I was merely rephrasing what they said: > But I find the fonts slightly too small at that resolution – given how far I sit from the screen.
- samatman 6y agoWithout accusing you of any -isms, OP merely said that, given how far they sit from the screen, the font is too small. You conflated that with sitting too far away. There are a lot of reasons why that might not be correct, including presbyopia. I think it's unlikely OP is sitting at that distance by accident, since it's pretty easy to move a monitor closer, so one of those reasons is more likely to apply than is your assumption.
- quicklime 6y ago> The author's proposed solution is for sites to use DPI instead, but this would thwart the preferences of users who use scaling because they want the whole site to look bigger. Agree. I sometimes browse the web on my TV - and I sit about 2 metres (or 6 feet) away from it. So the TV screen occupies a similar portion of my field of view that a phone would, and I usually browse at 150-200% zoom. DPI might help you figure out the size of the screen, but it doesn't tell you how much of a person's field of view that screen occupies, which is what really matters.
- hunter2_ 6y agoYes, field of view is what really matters, but scaling at the OS level (like TFA's author is doing) is a good way to correct for unusual fields of view. Got a higher-than-typical DPI and/or ridiculously far away screen and/or vision impairments? Scale the OS up. Got a screen with lower-than-typical DPI and/or touching your nose and/or amazing vision? Scale the OS down. You need the entire OS scaled, not just web pages. "CSS pixels" are kind of a roundabout way to conceptualize it, but they solve the problem of proper readability once the OS scale is correct for the user. The combination acts as a proxy for field of view. Then there's detection of course/fine pointing devices, as already discussed, to further augment the layout for proper target area. I don't believe anything else will matter if the above is accounted for.
- oxinabox 6y ago> The author's proposed solution is for sites to use DPI instead, but this would thwart the preferences of users who use scaling because they want the whole site to look bigger. The author's problem is not things becoming bigger. Larger was the goal after all of settings that scaling. The author's problem is things optimize for mobile interaction. Like making thing touch controlled, Or making buttons disproportionately large to make easy to click with thumb.
- Blikkentrekker 6y agoThe auctor is also complaining about suddenly obtaining touchscreen controls, however.
- varjag 6y ago> Sites are not detecting a portrait screen and deciding that they're displaying on a phone. You wish! A few years ago one website of a huge electronics component supplier did exactly that. I notified the webmaster, to which they responded that I represent a corner case in their new mobile-first strategy and it's a wontfix. However after politely inquiring how many of their customers source industrial supplies from their cellphones it was eventually reversed. https://twitter.com/varjag/status/1050370136585187328/photo/1 https://twitter.com/varjag/status/1050370136585187328/photo/...
- _trampeltier 6y agoYeah, Distrelec .. I saw this too.