I need to make my web portfolio phone friendly

Hi guys,
I just bought jquery novice to ninja and build mobile websites for smart devices, but I have a lot to learn before I can fully utilize those books. I’m hoping to start with some good advice from this forum. TY in advance : )

I’ve been searching the web and just started reading these forums but so far I havent found my solution.

I have a very simple portfolio design here: http://boblewisphoto.com/food.html
unfortunately it doesnt swipe the images when viewed with iphone or android

For comparison, this guys images do swipe http://stepheneastwood.com/
but I see that he uses frames and I think there must be a better solution

If someone would explain why my images do not swipe I would appreciate it and better yet would be if you all would give me your best advice for making my portfolio phone friendly.

My site is intentionally very simple because my intended visitors are in a big hurry. They do not want to wait for transitions, figure out unique navigation or have trouble finding something that they saw on a previous visit. I know that there are much cooler galleries available but for now (at least), I just want to make my images swipe. On the other hand I am open to suggestions and I appreciate others opinions.

I think it’s best not to go with a native app approach and if possible I would like to have one site that supports both phones and computer browsers.

Thank you very much!!
Bob

Hi bobThePhotog. Welcome to SitePoint. :slight_smile:

The gallery does swipe on iPhone, but some devices/browsers don’t support that (such as Opera, which is one of the most used browsers).

You might like to consider PhotoSwipe, a nice gallery for mobile and desktop, and it looks easy to install.

(There’s a handy video about it here and an [URL=“http://buildmobile.com/beautiful-image-galleries-using-photoswipe/”]article here.)

Hello Ralph,
Thanks for checking my gallery. It seems odd that that is swipes for you. My wife said it didnt work on her phone and I’m pretty sure that she uses safari but maybe it’s a different version or maybe she didnt really check it.

That brings up a new issue. What is the best way to test for various browsers and versions. Is there a way to test without having several different devices with several different browsers?

I’ll look into PhotoSwipe. Thanks for the tip and links!

Bob

Its working on my Windows Phone…not very smooth tho. :frowning:
PhotoSwipe doesn’t appear to work on Window Phone however.

Btw…use QR codes when posting URLs. Helps greatly with mobile devices.

It’s a tricky issue. Ideally, get access to as many browsers as possible. There are some simulators and other helpful testing tools, but there are so many mobile devices now that it’s impossible to test them unless you have a laboratory.

Thanks for looking at it for me. I started to read up on PhotoSwipe and they say there is a way to make it work for windows phones, using Jquery. I’ll have to check on that further before I go ahead. Thanks also for the tip about QR codes. I dont know what that is but I will read up on it.

Thanks for the input. I guess for now I’ll just focus on the most popular devices. Hopefully if I use basically mainstream “normal” web design the devices will be able to understand. You would think that the major manufactures will follow the standards and the standards shouldn’t require any heroic by web designers.

Thanks again,
Bob

Some devices have very basic browsers. (I wonder why they bother, really.) But there is a movement to cater for all devices by having simple styles for weaker devices, and fancier styles for devices that can handle them. This is a good read:

What is the best way to test for various browsers and versions. Is there a way to test without having several different devices with several different browsers?

The only reliable test is on the device itself, though there are some desktop / online apps that will give you some idea, like the iPad/iPhone simulator (as part of Apple’s dev tools), [URL=“http://www.springbox.com/mobilizer/”]Mobilizer app, and Opera’s [URL=“http://www.opera.com/developer/tools/mobile/”]Mobile Emulator.

Here’s a link on supporting multiple screen sizes:

Thanks everyone for the thoughts and links. I appreciate the help!

Bob