Viewing Mobile Scalability - i.e. pinch to zoom and double-tap

Mobile Scalability - i.e. pinch to zoom and double-tap



User: Christopher 11 years ago
It appears EverWeb prevents zooming in to photos and enlarging text on an iPhone on pages designed for mobile with a fixed width. There's a workaround but it would be nice if EW did this for me! See the discussion here.

Last edit 11 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 11 years ago
A good mobile site shouldn't need to be zoomed. Think about what you would want from a mobile site. You check it on the go and want to take a quick glance to get the information you need.

Mobile sites should be thin and long so that the user can glance over them with one finger. Not have to squint and/or pinch and zoom to read or view images.

That basically defeats the point. If you want to have that kind of mobile page than you should just show the desktop website.

Most shapes are very small images and some are even converted to CSS for you. That being said your mobile pages should be light on any type of graphics.

-------------------------------
Paul
EverWeb Developer
User: Christopher 11 years ago
Hey Paul, thanks for writing in. I have a poster on my test page and out of habit, I tried zooming in to see more detail. That's when I realized this feature wasn't incorporated into EW. But I realize that I do this a lot, and I see many iPhone users doing the same. Lots of people zoom in on pics or double-tap to fill the screen with a block of text. I think preventing users from doing that is limiting their experience.

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Paul-RAGESW 11 years ago
Right they do because the text and images are too small to view. You want to prevent this by using larger text sizes and images. Design your mobile site so it doesn't need to be zoomed or scrolled horizontally to view it.

If this isn't what you want then don't check the box that says this page is for mobile devices and you will be able to zoom.

You may see people zooming and pinching and mobile devices but that doesn't mean they want to be doing that.

What we could build in is a feature that lets you click an image to make it fill the screen of a mobile browser. That may be able to be added as a widget.

-------------------------------
Paul
EverWeb Developer
User: jefflopezdesigns 11 years ago
I agree with you 100% Paul

Quote: Paul-RAGESW - 10/10/2014 19:56:30
Right they do because the text and images are too small to view. You want to prevent this by using larger text sizes and images. Design your mobile site so it doesn't need to be zoomed or scrolled horizontally to view it.

If this isn't what you want then don't check the box that says this page is for mobile devices and you will be able to zoom.

You may see people zooming and pinching and mobile devices but that doesn't mean they want to be doing that.

What we could build in is a feature that lets you click an image to make it fill the screen of a mobile browser. That may be able to be added as a widget.
User: Roddy 11 years ago
The best viewing experience will be created by using portrait images sized to fit the viewport. Use an overlay figcaption to describe it.

There is a hover or click to expand widget in the new HTML5 set of widgets. This can expand an image to any size you want in four directions. It is very effective for SEO since it has both alt text and a figcaption. It is suitable for mobile sites. Rather than use a thumbnail, it shows a user selectable portion of the image on page load. It works using hover in computer browsers and tap to open and tap to close on mobiles.

As far as font size is concerned, 15px should be considered the minimum and 16px is better. This depends on the font family of course since 15px Verdana is OK whereas Helvetica would need to be increased to 16px. Stick to web safe or self hosted fonts and avoid using Google fonts on a mobile site.

One thing that is seldom considered is the importance of Readability. This is particularly true of mobile sites. Avoid serif fonts and italics and never mess with letter spacing or use justified text. See this page for more info…

http://everwebcodebox.com/content/readability.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 11 years ago
Just reading this page on my iPhone I've had to rescale with pinch to zoom. Not designed for mobile I guess.

Edit: actually I see it got fubarred.

Last edit 11 years ago

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.