Before you ask please READ THIS

Different layout for small screens(iPhone)

AirAir
in Photon Posts: 10,100
This discussion was created from comments split from: Top Space Problem.

Comments

  • Ok disregard the most recent post about the broken home page I read the manual and fixed that. Now a real problem I think... this is a beautiful theme for sure but the mobile version seems to be a miniaturized version of the desktop version instead of being re-thought for a 5" iPhone screen. Is there a way we can modify the mobile theme to have a very easy no-click user experience? Please have a look at my current mobile theme from Photodeck (I don't love them for other reasons so not saying they are all that but...) check this out on your iPhone device www.jakemillerphoto.com I would be happy to pay for an easier user experience on mobile.
  • AirAir
    Posts: 10,100
    Hello:-)

    I visited this site that you referenced and I don't see anything interesting there in mechanics of how it works on iphone.

    Also I am not sure what you mean by " no-click user experience". I believe we can hide some features in this smallest resolutions, cause there can be now too much of them.

    What you would like to hide, can you mark it on screen shot?

    Thanks for feedback!

    With kind regards.
  • Ok I will have to make a video to show you today.
  • Ok I'm back I just love your theme too much to leave it and I believe you can tweak the mobile version quickly enough. I use an iPhone 5 and just feel it's too cluttered a design on that resolution. Most of the other responsive themes. I can't film what my layout looks like but here is the link: http://d85.bf4.myftpupload.com/
  • AirAir
    Posts: 10,100
    Thanks for your kind opinion :-)

    Let me help you help me to help you and me :D

    1. Open your site in desktop browser, shrink window to size similar to iphone.
    2. Make screen shot(http://www.take-a-screenshot.org/).
    3. On that screen shot mark what you would remove/move/do anything else.

    I believe your main issues is with slider album layout on small screen, right? Possibly we wanted to show too much.

    Thanks in advance for your insight.

    With kind regards.
  • Hello Air so I'm finally at the point where I'm ready for help designing the site to be professional. I have a list of things that need to be addressed some of them mobile responsive related and others just formatting and presentation issues. Also I want a good designer to make it really polished looking. Are you available to do this for me? We could screen-share and discuss let me know. - Jake, talkwithjake@gmail.com 312-927-5253 skype jake.miller
    http://d85.bf4.myftpupload.com/
  • AirAir
    Posts: 10,100
    Hello again:-)

    We don't do personal customizations unfortunately.
    I was interested in your points, and what page we are talking exactly(I assume album slider). In that case we will review it internally and make some adjustments. Thanks for pointing this out, cause now after some time has passed from release I also have different look at it:-)

    With kind regards.
  • That's fine I totally understand it's not your your main business. Well here are the UX things I'd like to see change on the mobile version to accommodate clumsy thumbs and low attention spans of people riding the subway : )

    1. HP slider should revert to a brick display on mobile or at least resize which it currently doesn't. Slideshows are maybe ok on iPads but nothing smaller than that.

    2. Footer drawer thing should just become a regular footer. That tiny handle isn't very compelling to click on and anyway people don't want to click on mobile browsers as much. Also can I customize that little handle to put something bigger and custom in there like a camera shutter button?

    3. My phone number should be clickable.

    4. I can't find my social icons on mobile or desktop!

    5. Pages - esp. my investment page and contact page why can't we have a fluid responsive two column layout for image and form / text to that they can live side by side on desktop but then flow into top and bottom on iPhone.

    Using a background image is clever but disappears on mobile. A photo of me on investment page is very useful because wedding business works that way.

    6. Check Raves - I'd like to be really able to format that caption text better. Big and with different curly pull quotes maybe even float that text on top of the image. Why? Cause that's the most fun way to show a review. Currently people will just do it in PS but then you lose the text to SEO : (

    7. On contact form that center width with padding content space - I'd like to be able to adjust that for my particular form it's looking pretty funky right now.

    8. Menu should ideally change on mobile or maybe the transparency should become opaque. Reason is it's harder to see on smaller devices so less fancy does the job. I also like the right side drawer sliding out but maybe it's too much to click on for the iPhone user.

    There you have it. Maybe some of this is just 'hire a pro and let them do that but other things are maybe a theme design issue you decide.




  • AirAir
    Posts: 10,100
    jakemillerphoto said: 1. HP slider should revert to a brick display on mobile or at least resize which it currently doesn't. Slideshows are maybe ok on iPads but nothing smaller than that.
    What you mean it doesn't resize? Pictures are resizing for smaller devices.
    jakemillerphoto said: Footer drawer thing should just become a regular footer. That tiny handle isn't very compelling to click on and anyway people don't want to click on mobile browsers as much.
    Our thinking in that is, that :
    a) there is no very important info in footer, for mobile viewer, so we rather hide it to give him more space for viewing content.
    b) still he can access it with button that is finger size:-)
    jakemillerphoto said: Also can I customize that little handle to put something bigger and custom in there like a camera shutter button?
    You can do everything with CSS:-)
    jakemillerphoto said: 3. My phone number should be clickable.
    Where is your phone number? Put it in <a href="tel:+1800229933">Call us free!</a> and it will be clickable.
    jakemillerphoto said: I can't find my social icons on mobile or desktop!
    They are in footer, check our demo bottom right:-)
    jakemillerphoto said: Pages - esp. my investment page and contact page why can't we have a fluid responsive two column layout for image and form / text to that they can live side by side on desktop but then flow into top and bottom on iPhone.

    Using a background image is clever but disappears on mobile. A photo of me on investment page is very useful because wedding business works that way.
    As you noticed it is background image. And for some one that wish to view this background image we have "fullscreen button" in to right corner:) To achieve what you want you will have to make image as part of your content.

    What you ask for is not obvious, natural way of things that should happen(with background image) when we have smaller screen, but rather specific action depending on context. And such thing require custom coding, and is rather hard to adapt in template, that should satisfy many :-) I hope you understand it.
    jakemillerphoto said: I'd like to be really able to format that caption text better. Big and with different curly pull quotes maybe even float that text on top of the image.
    I believe this is job for plugin. There are many plugins that extend editor so you could achieve your ideas. Visual Composer could be one of it :-)
    jakemillerphoto said: On contact form that center width with padding content space - I'd like to be able to adjust that for my particular form it's looking pretty funky right now.
    That is totally case of plugin you have used, or rather way it is used, as I see you have used Contact form 7 plugin, but it emebeds code by <iframe> ? Strange.
    In case of normal contact form http://photon.apollo13.kinsta.com/pages/contact/ I can always give you some custom CSS to make it wider if you need it:-)
    jakemillerphoto said: Menu should ideally change on mobile or maybe the transparency should become opaque. Reason is it's harder to see on smaller devices so less fancy does the job
    We use solid color for that, but yes, if someone use semi-transparent color then he might want to changed for small screens. In your case you could use such custom CSS:

    @media only screen and (max-width: 600px) {
    #header .head, #header-tools .tool:hover, #header-tools .tool.highlight, #header-tools .tool.active, #header-tools .search.opened{
    background-color: #000;
    }
    }

    Thanks for all your points. Unfortunately most cases that you touch are very context specific, and it is very hard to resolve them on template level, as then we will dig user in "most of time" unnecessary options. We had hard time already limiting some settings, to keep it clean and also flexible. But if something is missing there comes support forum and plugins:-)

    If you wish to touch some cases, from this topic, any further, then please start new topic for each.

    With kind regards.



Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!