Help with mobile customization/resizing

FedericoMonetti

Hello, this is my first post here, after talking with the support of Smugmug they advice to ask question on this forum.
My website is: www.federicomonetti.com , I'm still working on it but I'm happy at the moment...on my desktop monitor.
The website looks awful on smartphones and tablets, both vertical and horizontal.
The main problems are on the homepage.
How can I attach few picture to this discussion to show you what I'm talking about?
Thank You.
Federico

denisegoldberg

@FedericoMonetti said:
How can I attach few picture to this discussion to show you what I'm talking about?

You will be able to attach photos after you have been a member here for a few days and after you have made a number of posts.

You can use CSS to change the look of your site for mobile devices, but before you attempt to change the site for smaller devices I would encourage you to review your site design overall. I believe you have too much on your home page for large devices as well. It appears to me that you are trying to expose the full content of your site on your home page instead of enticing your viewer to look at your site. I don't find the area starting with "Follow me" on your home page to be very useful since most of the entries are not active (clickable). In order to follow the call to action in the Services section your viewers need to scroll back to the menu. Why not let them click on the menu in the first place and not require the scroll down?

Here's a link to a page that shows how to use CSS to target a smaller screen - http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations. That's just the "outside" pieces of code; only you can decide what you want to show on the screen.

One basic change you might want to implement is to simply collapse your menu on small devices. That doesn't require code.

customize
content and design
click the wrench for your menu content element
on the Basic tab, scroll to the bottom and set Collapse for Mobile to ON

Related to your links to other sites - I understand your desire to keep your site open, but opening new browser tabs when I didn't request that a new tab be opened is usually a trigger for me to close the site. It should be the viewer's decision to open a new tab, not the site's decision. And yes, I know, my reaction may not be common - but you might want to think about how many open tabs a viewer will typically be able to manage.

FedericoMonetti

Hi Denise,

thank you, I came back to my 'original' homepage with just a slideshow ( I cropped some images to 3:1 and set the slideshow to 3:1 as well, like this on desktop monitor is an edge-2-edge slideshow without borders, at least on desktop monitors)
With a CSS I found I was able to add to the social icons one for ViewBug.
I removed the social icons at the bottom of the website and I kept them only in the header.
Doing this I also have less elements to fix on mobile devices visualization.
I add a title box on the bottom of the slideshow with letter spacing to fill the screen and I like it (on desktop monitor).

Thank You for the link, as I told to smugmug support unfortunately I'm not a web designer and I don't know anything about CSS or HTML, I understood how to use 'ready to use codes' and hopefully someone will help me to find the codes I need to fix the responsive design.

Should I start a new discussion or continue on this one?

Thank You.
Federico Monetti

denisegoldberg

@FedericoMonetti said:
Should I start a new discussion or continue on this one?

You can continue this conversation.

If you want help with CSS you will need to tell us exactly what it is that you want to change on mobile devices.

The only thing that jumps out at me is that your slideshow does not fill the screen either on desktop or mobile. Given the shape of your slideshow - wide with a small vertical size - it doesn't fit well depending on the size of the device or browser window.

If anyone wants to take a look, here's a link to the site - http://www.federicomonetti.com/.

FedericoMonetti

Thank You again,
about the slideshow I wanted one edge-2-edge, I tried using a background slideshow but I didn't like it. They only way I found reading online, and without using codes was to set the slideshow to 3:1 using pictures with the same ratio 3:1 , and It works on desktop.
On Ipad and smaller screen is still edge-2-edge and without any space between the slideshow and the header, but on smartphones is not, making the slideshow even smaller.
It doesn't fill the screen and that's why I was adding more stuff on the homepage under the slideshow, anyway at my eyes doesn't look to bad on desktop and tablets but of course I would prefer to have a slideshow edge-to-edge with another ratio to fill more the screen and show a bigger part of the photos.
This would be a nice improvement!
Any solution to do this?
Thank You

FedericoMonetti

ok I found the code for the slideshow edge-2-edge with another aspect ratio.
One things done, tomorrow I will set it properly with the pictures I want.

denisegoldberg

In case you're not aware of it, I find this tool to be helpful in looking at my site on different sized devices:
http://quirktools.com/screenfly/

FedericoMonetti

Thank you, normally I use Firefox as browser because its color managed and there is a tool directly inside Firefox to look the site at different sizes:
open the hamburger menu on the top right > web developer > responsive design mode.
You can then select different devices (Iphone, Samsung, Ipad etc..) or set your personal dimension for the screen, you can take screenshot of the viewpoint, rotate to view point in horizontal mode etc.. I found it very useful but I don't know it works as other tool.
The shortcut is Ctrl+Shift+M.
I will have a look at quirktools.com/screenfly/!

denisegoldberg

@FedericoMonetti said:
Thank you, normally I use Firefox as browser because its color managed and there is a tool directly inside Firefox to look the site at different sizes:

open the hamburger menu on the top right > web developer > responsive design mode.

Thank you - I didn't know about that tool!