1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Alternative to a 100% viewport height page design in mobile landscape mode

Discussion in 'HTML & Website Design' started by ajmarriott, May 19, 2017.

  1. #1
    I was given some designs for a quasi social network that I need to build with CSS and HTML. We'll have another developer to do the JavaScript work. For simplicity's sake, let's say each user's profile consists of two views - one is the user's main landing page which is a full-screen photo, some short details about them, and a message input box. Then if you swipe to the left, you'll see the user's other view - a details page. The mocks require that each view is 100% of the device's viewport height, and the views are not scrollable i.e. the height is fixed to the viewport's height. If you want to browse other profiles, you would swipe up to go to the next profile. Also assume that the content on the profile details page will be limited to a number of characters for each section so that it will fit (the designer has already determined what that limit is and what minimum phone size they have optimized the design for.).

    If you're viewing this on a phone and turn it to landscape mode, the phone's height will change to a much shorter height. Aside from using CSS and/or JavaScript to make the views scrollable (i.e. not fixed to the viewport height), what are some alternatives to making this design usable in landscape mode?

    Or if you feel the best way to handle this is with CSS and/or JS, please feel free to discuss. One option is detecting if the viewport height is less than a certain threshold then doing stuff to make the views scrollable. But I'd like to hear other thoughts, including if this type of design is not well suited for mobile browsers and should be revisited.

    Attached are sample mocks similar to what we received. Also, the designers don't want to provide responsive/tablet designs of this profile. They just want it to be designed for portrait mode.

    [​IMG]
    [​IMG]
     
    ajmarriott, May 19, 2017 IP
  2. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    45
    #2
    Have you heard about vh and vw in CSS? Simply adjust the image so the quality is not ruined for the landscape mode on the mobiles and add the scroll option. I doubt many people will use it in landscape as it's not a way to surf the web anyway.
     
    Rokis, May 20, 2017 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Just make it so the app doesn't turn in landscape? Hence, it will always stay in portrait mode. Plenty of apps do this already. Instagram is one of them, for instance.
     
    PoPSiCLe, May 20, 2017 IP
  4. ajmarriott

    ajmarriott Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Short answer, there's no way to cleanly force a website to stay in portrait mode. Native apps can do this but not websites in a mobile browser. I glanced online about workarounds, and people talk about using certain frameworks or hacky CSS. But my initial reaction is that it will be very messy. People are saying these solutions are not good practice, that we shouldn't control a device's OS behavior. Plus our website is already built in Angular, and I don't think Angular has a solution for this. This social network feature we're making is going to be integrated into our site.
     
    ajmarriott, May 20, 2017 IP