iPad How responsive design websites look in split view mode

[Rogifan]

Here’s the golf channel website when using split view mode.

And here it is without split view.

I feel like when split view isn’t 50/50 Safari should present the desktop view of websites. In the first view there is a ton of wasted white space and a lot more stuff buried under the hamburger menu. It’s basically a blown up version of what you’d see on a phone. Is this something Apple has the ability to control now they’ve made Safari more like a real desktop-class browser in iOS 13?

 

[Mr.Blacky]

Try making the size of the fonts smaller in Safari.

 

[jww062]

Here’s the golf channel website when using split view mode.

And here it is without split view.

I feel like when split view isn’t 50/50 Safari should present the desktop view of websites. In the first view there is a ton of wasted white space and a lot more stuff buried under the hamburger menu. It’s basically a blown up version of what you’d see on a phone. Is this something Apple has the ability to control now they’ve made Safari more like a real desktop-class browser in iOS 13?

It isn't Safari doing that -- a browser doesn't get to pick which version of the website is shown. Responsive websites don't look at the user agent of the browser, but rather they look at the width of the window. The browser doesn't choose a desktop vs. mobile view. There are different media queries in the CSS that set breakpoints where the design changes more drastically once the screen is no longer of a min-width wide. (The "responsive" in responsive design comes from it responding to the width of the screen, unlike mobile sites of 10 years ago that looked at the user agent and forwarded you to one of two different websites, depending upon whether it was a mobile or desktop device.)

If I open that site in Google Chrome on a Mac and make the to be as many pixels wide as Safari is in that instance, it looks the exact same way.

 

[Rogifan]

It isn't Safari doing that -- a browser doesn't get to pick which version of the website is shown. Responsive websites don't look at the user agent of the browser, but rather they look at the width of the window. The browser doesn't choose a desktop vs. mobile view. There are different media queries in the CSS that set breakpoints where the design changes more drastically once the screen is no longer of a min-width wide. (The "responsive" in responsive design comes from it responding to the width of the screen, unlike mobile sites of 10 years ago that looked at the user agent and forwarded you to one of two different websites, depending upon whether it was a mobile or desktop device.)

If I open that site in Google Chrome on a Mac and make the to be as many pixels wide as Safari is in that instance, it looks the exact same way.

Ah ok. I get it now. still seems like some websites could show more information when the window size is, say, 75%.

 

[jww062]

Ah ok. I get it now. still seems like some websites could show more information when the window size is, say, 75%.

In most cases they certainly could. It's up to the developers of the website to to do this.

I say this as someone on their lunch break at work right now, where I've spent the day building a responsive website for one of our internal applications, trying to optimize the view of those visiting on phones and tablets.

 

[kasakka]

Ah ok. I get it now. still seems like some websites could show more information when the window size is, say, 75%.

As a web developer I usually target a few display sizes. At the minimum "phone", "tablet" and "laptop". Landscape views for each often default to the next size up, e.g. phone in landscape is shown in tablet mode that hopefully takes into account that the screen is smaller so things don't look odd.

What you are seeing on that website is either what they felt the portrait tablet view should look like or they didn't bother with a tablet size at all and instead you are getting the phone view. The amount of whitespace may be a percentage size so on a phone it would look better. You can try if it changes the view when you resize the split view to the smallest size, essentially giving you the phone view.

If you want more info visible you need to send a suggestion to the people making the website.

 

[Rogifan]

As a web developer I usually target a few display sizes. At the minimum "phone", "tablet" and "laptop". Landscape views for each often default to the next size up, e.g. phone in landscape is shown in tablet mode that hopefully takes into account that the screen is smaller so things don't look odd.

What you are seeing on that website is either what they felt the portrait tablet view should look like or they didn't bother with a tablet size at all and instead you are getting the phone view. The amount of whitespace may be a percentage size so on a phone it would look better. You can try if it changes the view when you resize the split view to the smallest size, essentially giving you the phone view.

If you want more info visible you need to send a suggestion to the people making the website.

Thanks. My guess is NBC doesn’t spend a lot of time creating quality websites. This site was actually better before it went responsive. I don’t know why responsive has to mean tons of white space and little information.