responsive design / mobile

[leslyejoy]

Hi Andrew.

I have some questions about the way the site displays on my iPhone. Because the display is so narrow, it makes for a really long scrolling situation and a weird reading experience. And because the display shows the portfolio filter icons stacked vertically before anything else, the scrolling is even worse. Is there a way to make the display wider (right now it only takes up about half the width of my phone screen, centered) and is there a way to disable the icons for smartphone-size devices or some other idea to make the experience better?

I am otherwise SO happy with the theme!

Thanks,
Leslye

[satori]

Dear Leslye,

I’ve conducted extended testing with the mobile interface before releasing the theme, and the icon menu rectangles proved to be the most user-friendly option for adapting the icon menu items to smaller screens. If you have ideas or suggestions on an alternative way of showing the icon menu on smartphone screens, I will be more than happy if you could share.

The width of the content is directly proportional to the width of each portfolio box, and changes in full increments of the latter width; this means that you can influence the width of the content on smartphone screens by changing the width of the portfolio items boxes in Theme Options, “Portfolio Page” tab, “Portfolio page items: box dimensions” option. Since there are so many different kinds of devices with wildly varying screen sizes, this adaptability ensures that there is no need for fixed rules for every kind of screen, of which there are hundreds and new ones are being created all the time.

Sincerely,
Andrew / Satori Studio

[leslyejoy]

Hi Andrew.

For the icons, why not array them in a grid, say 3 or 4 across, instead of stacking them vertically. I have 7 icons, so it’s quite the scroll when they are in a single stack, and a waste of mobile real estate.

For the rest, I understand about the portfolio tiles stacking, but I don’t understand why that has to constrain text pages. For my text to be only one box wide looks really bad and is such a waste of space when the screen is so much bigger across. And I do not want to mess with the way the design appears on bigger screens by making the boxes bigger just to improve the mobile layout.

Make sense?
Thanks!
Leslye

[satori]

Dear Leslye,

regarding the icon menu – the only reason I’ve not made them into a tiled grid is because in that case there wouldn’t be any place for the labels, which in the case of mobile screens is a problem – there is no “mouse hover” action on touchscreens that could reveal the labels. In any case, I will experiment with both issues and see if anything can be done to improve the user experience – it make take some time, so please if I’m not back to you at the beginning of next week, would you be so kind as to remind me?

Sincerely,
Andrew / Satori Studio

[leslyejoy]

Thank you, Andrew. As usual, your responsiveness (no pun intended!) is much appreciated.

[leslyejoy]

Hi Andrew, just pinging you on this as you requested.

One more thought: I would be willing to go without my icon labels for mobile in order to get the icons arrayed in a grid. Would it be possible to disable the labels for the smartphone-size screens, say below a certain set of dimensions, but keep them enabled for monitors, laptops, and tablets?

[satori]

Hey Leslye,

I’ve implemented the tiled icon menu and the new content width algorithm for smaller screen on your website; please check it out and let me know if anything is inconvenient.

Sincerely,
Andrew / Satori Studio

[leslyejoy]

Hi Andrew. Huge improvement! The only thing off is that the portfolio thumbnails are cropped as opposed to resized, so the images that are just words have some of the words cut off. Is there anything you can do about that?

Thank you so much,
Leslye

[satori]

Hey Leslye,

well this is a tough one; I can either tell the images not to stretch in the rectangular boxes on small screens, which will make all images different in width depending on the dimensions of the original files; or I can set the height to automatically be equal to the length at any given screen width, which would in turn lead to quite large item boxes on smartphone-landscape screens. I think the first option is a less clumsy solution; alternatively, you can use the “aside” project format for text-only projects, replacing images with plain text for more flexibility. Please let me know what you think!

Best,
Andrew / Satori Studio

[leslyejoy]

Thanks, Andrew. I think I’ll leave as is for now.
Best,
Leslye

[Author]

Posts