Mobile version (iPhone/iPad) BUGS!

corinos

I just unveiled the new smugmug design for my site, http://www.orinosphotography.com, only to find out that the iPad and iPhone mobile versions are completely messed up.

For example, on the iPad the menu functionality looks weird (when I press Portfolio it doesn't take me to that folder but I have to press again Portfolio on the submenu that pops-up). The left menu doesn't stretch all the way to the bottom. Worst of all, in the About section, I can see the Smugmug notification "Gallery is Empty" in an empty box below the main text body!!! None of these issues arise in the full version of the site in either Chrome or Safari, Windows or Mac.

The version of iPhone is so out of alignment that I won't even attempt at further describing...

That's very frustrating, much more so because we cannot deactivate the mobile site. Any thoughts, ideas, feedback on that matter?


Cheers,
Chris

leftquark

corinos wrote: »

I just unveiled the new smugmug design for my site, http://www.orinosphotography.com, only to find out that the iPad and iPhone mobile versions are completely messed up.

Hi Chris,
First of all, there's mobile and tablet specific customizations for CSS which are described on my customizations website: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations. Hopefully a couple of these will help you sort out your issues.

corinos wrote: »

For example, on the iPad the menu functionality looks weird (when I press Portfolio it doesn't take me to that folder but I have to press again Portfolio on the submenu that pops-up).

This is how Menu's in Tablets work -- you don't have a mouse so the mouse-over hover doesn't exist. The tablet can't know your finger is over the "Portfolio" link so you have to click it to bring it up, then another click to select the item in the menu. This is how Safari does it and not a function of SmugMug. Look at any page in Safari on a tablet with a menu and you'll see the similar functionality.

corinos wrote: »

The left menu doesn't stretch all the way to the bottom.

Can you explain this? I don't have my iPad on me at the moment but it looks like (according to viewing your site in Screenfly) that your site should fit on tablets and the menu does stretch.

corinos wrote: »

Worst of all, in the About section, I can see the Smugmug notification "Gallery is Empty" in an empty box below the main text body!!! None of these issues arise in the full version of the site in either Chrome or Safari, Windows or Mac.

Only you can see that because you're logged in. None of us see "Gallery is Empty." In fact, we don't even know it's a gallery. You could change your "About" page to a "Page" and not have it be a gallery, and then you won't have to deal with it at all. Just drop an HTML block in with the text for your "About" page.

corinos wrote: »

The version of iPhone is so out of alignment that I won't even attempt at further describing...

Seems to look OK for the most part, again using Screenfly to view (http://quirktools.com/screenfly/#u=http%3A//www.orinosphotography.com/&w=320&h=568&a=37&s=1)

corinos

Thanks a lot leftquark. I already figured out some of the points you mention (about menu functionality in tables and about Pages vs. Galleries in Smugmug). It was good to get a confirmation from another person though.

Additionally, I did a couple of tweaks using your code (removed the Social buttons and Search box and changed the "h1" text font-size) for small screen portable devices.

Finally, I decided to go for simplicity and remove some of the descriptions (Download, Like, etc.) from the Gallery and Lightbox views. Now the site looks better on both the full and mobile version.


Cheers,
Chris