HELP: Mobile screen orientation

[shevek]

Hi,

mobile friendly design has been a topic on this forum a couple times now, and I've seen this helpful resource among others.
But I noticed we all tend to focus on the vertical mobile view the most... when there is also the horizontal mobile view, and could be especially interesting for tablets that are used in horizontal mode with a keyboard.

I also think many sites would probably profit more from a horizontal mobile view than just the vertical or none at all. If it looks bad on vertical (or is impossible to offer vertically), we could at least offer a working horizontal view. It's true that most people scroll content on vertical, but if you take a look at my site for example, the home would just look way too small trying to fit that onto vertical, and it's not content that I can stack vertically at all. If you open it on mobile now, you will have to scroll around the site with your finger, but at least everything is readable and tappable.
What would make the most sense for me is offering a working horizontal view so you can at least flip the phone or tablet to horizontal and get a better experience. My site doesn't budge though.. yet.

I've researched a little but didn't find much aside from this.
Basically, you would set two different designs via

Code

@media (orientation: landscape) {
  /* Styles for horizontal orientation */
}

@media (orientation: portrait) {
  /* Styles for vertical orientation */
}

But I've also read online that some browsers and especially Android devices don't accept orientation: portrait, for example.

In the resource by dannarchy, it is suggested to work with

Code

@media only screen and (min-width: 1000px) { or (max-width: 999px) {.

I wanna know if more of you have already looked into horizontal mobile view (I think this could be interesting even if you already have a working vertical view) and what your opinion on both approaches is. What are you using, what might be the better solution especially for a page like mine, whose rectangular image map and background image is the point? At first glance, I have to assume there is not much to style about the image map size, so my best bet will be about screen size, but I am not sure.

(Currently only about the home page and subsequently, the sitemap. I'll deal with the other pages some other time)

[brisray]

There's lots of ways of doing this now. One way is using CSS Flexbox or Grid layouts. Another is to let the browser do all the calculations for you as in https://blog.logrocket.com/flexible-layouts-without-media-queries/.

There's several sites around that give common breakpoints, such as https://blog.logrocket.com/css-breakpoints-responsive-design/.

What I did was use some of those first. Then realized I really didn't really need a load of them. I opened my sites in Chrome then pressed F12 to open the developer tools. As you drag the border between the site and tools around, the actual screen size appears in a little box in the top right of the site screen.

Edge works the same way as Chrome and Firefox does the same sort of thing, but in a little diagram in the bottom right of the screen.

I made a note where my breakpoints were and where the site really did need them - like changing the number of columns, where the menu changed to being one of those hamburger things and so on. By changing the size of things like the search bar a little in the main CSS, I found I was able to do away with a lot of the breakpoints.

There are some things you can do to your image map to make it responsive. I've used Matt Stow's JQuery solution from https://github.com/stowball/jQuery-rwdImageMaps with the demo at http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html in the past and that works really well.

Or, perhaps a more modern way is to create one using a SVG image as in this tutorial - https://www.freecodecamp.org/news/how-to-make-clickable-svg-map-html-css/. I've started messing around with SVG images a bit and they can do some really nice things.