This blog is about Graphic Design, Vector Art, and Cartoon Illustration

Designing for mobile devices - avoiding the pinch, zoom and turn

If your web page displays like this (at left) on a mobile device, you are in trouble. There was a time a few years ago when everyone was happy just to be able to get to your web page on their phone. This *miniaturized* view of your web page was pretty cool when it first started appearing on cell phones a few years back, now it just means trouble.

In order for someone to read and navigate your site, if it just looks like a mini version of your desktop page, they have to *pinch* to enlarge, and zoom around to see the page. Or they could try to read it by turning their device sideways. As a web designer, you want to design to avoid making them do this.

That doesn't mean that you absolutely, positively, have to go redesign your web page. It will display just fine, and people who want to read your page will zoom, pinch and turn. It just falls under the category of being annoying. But annoying someone who is reading your page can be enough to discourage them, and make them click away. And with more and more site optimized for viewing on a 320-pixel screen, people will begin to click away immediately after seeing a web page like this.
I am in the process of updating my professional website in order to avoid *the pinch*, and I am still not satisfied with it, so I continue to look for new ways to improve it. It's done with very clean and simple HTML and CSS, created in Dreamweaver 5.5. Right now, it should display properly on mobile devices and tablets, meaning that there would be no need for pinch, zoom and turn. I am now trying to test it on every device on the planet. If you have a browser, mobile device, or tablet on which it is not displaying properly, please let me know!

As I tell my students, I don't even believe the light goes out in my refrigerator when I close the door. So inspect what you expect!