Consumer-oriented marketing through interactive video ads and free in-game credits via mobile apps seems to have taken root and it’s been a flourishing trend in mobile advertising. Naturally, online retailers that already made their fortunes and established their brands through the Internet now widen their market reach by optimizing their digital content and website design for different screen resolutions and mobile platforms. They’re targeting tech-savvy consumers who frequently used their smartphones and tablets to watch blockbuster movies via paid streaming services like Flixster and to purchase songs, ringtones, and apps from iTunes or Google Play.
The principles of responsive web design (RWD) were meant to fix usability issues in displaying websites on different platforms and screen resolutions. Designers must create multiple versions of a website design for at least three screen sizes, including the 320×480, 480×768, and 768x browsers. Most designers assign a fixed layout to each display resolution and simply adjust the margins for convenient styling. On one hand, web design experts view a fluid and scalable design as a more optimal choice for a better user experience in a larger number of mobile devices, including after-market products that run on older versions of Android.
The old trick of simply adjusting the width of a webpage relative to a smaller screen doesn’t work anymore. It forcibly squeezes other page items, such as an embedded media player and an interactive menu, into a very limited area. Now, designers must work with website owners when selecting content to display in smaller screens. Nevertheless, all versions must have the same formatting for text and images and they must use the same design elements, like an image or a font type, whether in part or as a whole.
To illustrate, a website’s homepage appears on a 10-inch tablet just as it does on an LCD monitor. In a mobile browser that’s as wide as 480 pixels or greater, the display area can only accommodate a single-column layout with three to four links, an image or two, and a few lines of text. Users don’t have to scroll down a longer screen (i.e. 480 pixels wide by 800 pixels tall for some Android and Windows 7 devices), which also provides more space for additional content. Some creative ways of making the most of a mobile’s limited screen include placing text in expandable or collapsible containers and breaking up long blocks of text into several pages of two to three paragraphs.