Device Proliferation Creating Headaches for Web Designers

Stephen Yagielowicz

Modern consumer media devices come in all shapes and sizes, with differing display options, form factors and functionalities. One size no longer fits all; causing problems for those who seek to satisfy today’s audiences on the go — but fortunately a wide range of solutions exist. Here are a few tips to help you make sense of your choices.

While much is made about the pros and cons of web apps versus native mobile apps, the developmental ease and lower deployment costs of web-based applications makes this irresistible territory for many adult content marketers, who may find the preferred native app distribution channels blocked to porn promoters.

Modern consumer media devices come in all shapes and sizes, with differing display options, form factors and functionalities. But one size no longer fits all.

In essence, it is easier to build and market a website that is available to everyone, than it is to deploy an adult app for a specific device, say an iPhone, only to be rejected by the main distribution source for that platform (App Store) based on antiporn policy decisions that drastically limit profit potential. You just need a bigger pond to fish in.

One major factor in this equation is screen size.

Screen sizes are as much a matter of pixel count as they are of physical dimensions — while the access platform may not always be the viewing platform — when, for example, an iPad wielding consumer uses an HDMI adaptor to watch a video on a living room TV.

This illustrates how statistically reported devices may not be the device actually used.

Designers often accommodate screen size as a matter of resolution on the assumption that “a pixel is a pixel” — but a web page optimized for a 1024x768 display is going to be a very different user experience on an old 20” CRT at 72 pixels per inch (ppi) than it is on the iPad2’s 9.7” screen at 132 ppi or an iPad mini with its 7.9” screen at 163 pixels ppi — even though all three screens operate at a resolution of 1024x768 pixels. Throw in the iPad3 with its sexy Retina display, which stuffs an amazing 2048x1536 pixels at 264 ppi into a 9.7” screen, and it becomes easy to see the depth of the challenges faced by today’s adult web designers who can no longer rely on target display resolutions — or a simple order to “build a site for iPad” — as a design guide.

One interesting note: most tablet users don’t want to see “mobile” site versions; while Smartphone users with limited data plans often demand faster, lighter weight approaches that are more content rich than those offered to basic feature phone mobile site users.

If you’re starting from scratch, building a new site from the ground up, then many of these design issues can be accommodated from the get-go. But what can be done to bring a legacy site up to current standards?

First, audit existing sites on a variety of platforms to see where it falls apart, either using mobile device emulation software or services, or on actual devices available to you, making a list of action items as you go, then start chipping away at any problem areas.

For example, iOS-driven hardware such as iPhone and iPad or other devices that do not support Adobe’s widely used Flash, must still contend with a range of sites making heavy use of this popular but problematic technology — with often unpredictable results.

On the adult affiliate front, Flash-only webcam previews or ad elements that display warning notices that Flash is required to view them, leave a publisher’s site looking like it is broken — while hurting revenues due to a lack of a fallback ad format implementation.

Coding can easily be used to mitigate this, however, by swapping in a static banner ad when the Flash ad is unable to be displayed.

This example of adaptive design measures joins responsive design practices utilizing HTML5 and CSS3 media queries as perhaps the best option for web publishers targeting the broadest possible audience.

In this case, we are not necessarily building different sites for different platforms, but rather, relying on conditional coding techniques to modify existing sites to dynamically alter their content and ad display methods based on the user’s unique display parameters. Using HTTP USER_AGENT strings and other techniques for identifying the user’s environment is an effective way to cater to a client’s individual needs.

These scripting methods allow page elements to be included or excluded based upon factors such as browser type and orientation — using a tablet to view a website in portrait mode is a very different experience than is viewing that same website in landscape mode.

The bottom line is to put as much content as will comfortably fit on a viewer’s screen, with different screens receiving different materials maximizing the user experience based upon device capabilities. Take a couple of aspirins for that headache, and get coding!