Hi there - new to the forum, and big fan of Rapidweaver! I built my website, www.johnbamber.com and specifically wanted to ensure the site looked great both on the desktop and mobile platforms. Specifically the issue I'm having is with displaying photos. I'm currently using Collage2 pages for each of the categories of photos. I really like the lightbox effects from those, and the user experience when viewing the page on a desktop. When I look at the page from my iPhone, however, the images exceed the size of the iPhone screen, and thus its difficult to get a good experience when viewing the page on mobile.
My question is... what would be the best way to showcase the photos with the same functionality (being able to have a lightbox effect when seeing a larger version of the photo, on-screen arrows etc to advance to the next/previous photos) that more appropriately sized the photos only when used with a mobile device as opposed to a desktop site?
I hope that question makes sense... thanks for your help and am looking forward to your replies!
Comments
Sorry to tell you that the absolute best way to ensure that your site looks good on mobile / iPad devices is to build a second website. It's what needs to be done.
You might want to look at using mobilize stack , or one of their themes (I think they have two mobile-specific themes). Mobilize will detect if the website user is visiting from a mobile device & automatically route them to your mobile-website version.
I think there is CSS to do this (i.e.: separate CSS style page for mobile visitors), but I just cannot be bothered.
I'm wrapping up completing my mobile version. It isn't overwhelming. Just think that everything needs to be smaller & more 'interactive'. People have different website expectations from a mobile / iPad device. Simpler is generally the way with mobile websites. (Check out Coca-Cola's mobile site as an example).
Joe Workman has a bunch of mobile-device stacks (fluid sizing) for rotation optimization etc.
Good luck!