Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    ajm
    ajm is offline
    Junior Member ajm's Avatar
    Join Date
    May 2017
    Posts
    2
    Member #
    56610

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

    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 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.

    UPDATE: I forgot to note that the designers don't want to provide responsive/tablet/desktop designs of this profile.

    960Te.jpgVqxel.jpg
    Last edited by ajm; May 19th, 2017 at 09:54 PM. Reason: fixed a typo

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    A couple of considerations about this design and how to go about it. First, always assume users are going to do it wrong at least some of the time. What I mean by that is, not everyone's photo is going to be portrait. So, really you're going to have to account for 2 scenarios. There's a few ways to go about this:

    1: Crop. Not prime, but will work. Doesn't account for centering the right portion of the image unless you have an algorithm to do that.
    2. Multiple photos. Have a primary photo. When that photo won't fill the screen, add another.
    3. Gallery as secondary. This I think will work best. Imagine your example image in landscape. To the right, place a block of thumbnails or similar as a gallery.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    ajm
    ajm is offline
    Junior Member ajm's Avatar
    Join Date
    May 2017
    Posts
    2
    Member #
    56610
    Thanks for your feedback. We will have an algorithm that will do a number of things. We'll do some facial detection and position the head in a certain place, and in the case of landscape photos, we'll zoom in on those, cropping out the sides.

    We do plan to have a gallery. For simplicity I didn't include that here. If you have any thoughts on how this design should look if a user turns his/her phone sideways, please let me know. I forgot to note that the designers don't want to provide responsive/tablet/desktop designs of this profile.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If you have algorithms to detect faces, then just crop it in landscape. Be sure to plan for the idiot user who doesn't upload a photo with a face in it, though.

    And regarding your designers - However you need to get the message across, they need to do their job. If that means finding a way to make them, then do that. You can't properly do your job if they don't do theirs. I deal with this kind of thing all day, every day. Stand up and make sure people are aware of what you can't do your job without.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com