Streaming live at 10am (PST)

Designing for iPhone X specifically. Thoughts?


#1

Saw this article on twitter and thought, oh no. But then again, how many people really browse the web in mobile landscape?

https://webkit.org/blog/7929/designing-websites-for-iphone-x/


#2

That’s a difficult stat to get but we know some things:

— the bigger the mobile device is, the more the landscape mode is used
— landscape for tablets is used a lot, and in majority for large tablets
— studies come up with various numbers, some say landscape is as low as 18%, but most say landscape si as high as 40%
— in 2017, mobile browsing is going to represent more than desktop browsing

So at worst you have 18% of half of the traffic and at best almost half of half.

In any way, that’s a lot of people, landscape is important and must be designed accordingly.

But it’s the most difficult view to style, so we (designers) often say “who’s using landscape anyway?” (I do when I run out of time). Some agencies don’t even address this breakpoint.

I don’t fully get the webkit.org article (and the situation). If the new CSS functions are introduced for iOS11, are they only used on X or on every iOS11 devices? It only says: “WebKit in iOS 11”.

Personally I’m reluctant to start to address exceptions. We’ll see what kind of market share we’re facing, but that’s not a very good news. Website are good, refined, polished when they don’t need to address exceptions (Hello Webflow!).

Do you also have hard times to style this view? I have a weird workflow for that: I design desktop, then tablet, then I switch to mobile portrait, secure the most important parts of the design coming from desktop and tablet, then only I go to mobile landscape and design for it, making sure not to destroy the mobile portrait view on the way.


#3

Anyone had any advances on these thoughts? My latest client seems to have bought himself an iphone X and although I can’t see it, it sounds like they are getting a very long narrow version of the desktop site in landscape?

If this is the case would there be a way to put in a specific message to a device that can’t handle the website if requested?

Thank you :slight_smile:


#4

No, iPhone x with Safari in landscape gets the mobile landscape breakpoint.

You can target anything you want: OS, size of the browser, browser… Anything is possible with JS and redirections.


#5

Thanks Vincent!

Fingers crossed I won’t have to dive into the depths of JS.